import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import {
  ErrorMessage,
  FormContainer,
  RegisterDescription,
} from "./FirstPartOfRegistration.styled";
import { useFormik } from "formik";
// import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import { TextField } from "../../../../components/TextFields/TextField/TextField";
import { IconButton } from "../../../../components/Buttons/IconButton/IconButton";
import { ReactComponent as VisibilityOn } from "../../../../assets/images/svg/eye.svg";
import { ReactComponent as VisibilityOff } from "../../../../assets/images/svg/eye-striked.svg";
import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
import selectedTheme from "../../../../themes";
import firstPartValidation from "../../../../validations/registerValidations/firstPartValidation";

const FirstPartOfRegistration = (props) => {
  const [showPassword, setShowPassword] = useState(false);
  const [emailTakenStatus, setEmailTakenStatus] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    console.log(props.informations)
    if (props.informations?.mail) {
      console.log(props.informations)
      formik.setFieldValue("mail", props.informations.mail);
      formik.setFieldValue("password", props.informations.password)
    }
  }, [props.informations])

  useEffect(() => {
    if (props.error.length > 0) {
      setEmailTakenStatus(true);
    }
  }, [props.error]);

  const formik = useFormik({
    initialValues: {
      mail: "",
      password: "",
    },
    validationSchema: firstPartValidation,
    onSubmit: props.handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  const handleClickShowPassword = () => {
    setShowPassword((prevState) => !prevState);
  };
  return (
    <FormContainer component="form" onSubmit={formik.handleSubmit}>
      <RegisterDescription component="p" variant="p">
        {t("register.descriptionFirst")}
      </RegisterDescription>

      <TextField
        name="mail"
        placeholder={t("common.labelEmail")}
        margin="normal"
        value={formik.values.mail}
        onChange={(value) => formik.setFieldValue("mail", value.target.value)}
        error={
          (formik.touched.mail && Boolean(formik.errors.mail)) ||
          emailTakenStatus
        }
        helperText={formik.touched.mail && formik.errors.mail}
        autoFocus
        fullWidth
      />

      <TextField
        name="password"
        placeholder={t("common.labelPassword")}
        margin="normal"
        type={showPassword ? "text" : "password"}
        value={formik.values.password}
        onChange={(value) =>
          formik.setFieldValue("password", value.target.value)
        }
        error={formik.touched.password && Boolean(formik.errors.password)}
        helperText={formik.touched.password && formik.errors.password}
        fullWidth
        InputProps={{
          endAdornment: (
            <IconButton onClick={handleClickShowPassword}>
              {showPassword ? <VisibilityOff /> : <VisibilityOn />}
            </IconButton>
          ),
        }}
      />

      {formik.errors.mail && formik.touched.mail ? (
        <ErrorMessage>{formik.errors.mail}</ErrorMessage>
      ) : formik.errors.password && formik.touched.password ? (
        <ErrorMessage>{formik.errors.password}</ErrorMessage>
      ) : (
        <></>
      )}
      {props.error && <ErrorMessage>{props.errorMessage}</ErrorMessage>}

      <PrimaryButton
        type="submit"
        variant="contained"
        height="48px"
        fullWidth
        buttoncolor={selectedTheme.primaryPurple}
        textcolor="white"
        disabled={
          formik.values.mail.length === 0 ||
          formik.values.password.length === 0 ||
          formik.values.mail === props.error
        }
      >
        {t("common.continue")}
      </PrimaryButton>
    </FormContainer>
  );
};

FirstPartOfRegistration.propTypes = {
  children: PropTypes.node,
  handleSubmit: PropTypes.func,
  error: PropTypes.string,
  errorMessage: PropTypes.string,
  informations: PropTypes.any,
};

export default FirstPartOfRegistration;
