import React, { useEffect } from "react";
import PropTypes from "prop-types";
import {
  FormContainer,
  RegisterDescription,
} from "./ThirdPartOfRegistration.styled";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import { TextField } from "../../../../components/TextFields/TextField/TextField";
import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
import selectedTheme from "../../../../themes";

const ThirdPartOfRegistration = (props) => {
  const { t } = useTranslation();

  useEffect(() => {
    if (props.informations?.phoneNumber) {
      formik.setFieldValue("phoneNumber", props.informations?.phoneNumber)
    }
    if (props.informations?.location) {
      formik.setFieldValue("location", props.informations?.location)
    }
    if (props.informations?.website) {
      formik.setFieldValue("website", props.informations?.website)
    }
  }, [props.informations])

  const handleSubmit = () => {
    if (formik.values.website?.length !== 0 && !formik.values.website.match(
      /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm
    )) {
      formik.setFieldError("website");
    } else {
      props.handleSubmit(formik.values);
    }

  }

  const formik = useFormik({
    initialValues: {
      phoneNumber: "",
      location: "",
      website: "",
    },
    validationSchema: Yup.object().shape({
      phoneNumber: Yup.number(),
      location: Yup.string(),
      website: Yup.string()
    }),
    onSubmit: handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  return (
    <FormContainer component="form" onSubmit={formik.handleSubmit}>
      <RegisterDescription component="p" variant="p">
        {t("register.descriptionThird")}
      </RegisterDescription>

      <TextField
        name="phoneNumber"
        placeholder={t("common.labelPhone")}
        margin="normal"
        type="number"
        value={formik.values.phoneNumber}
        onChange={formik.handleChange}
        error={
          (formik.touched.phoneNumber && Boolean(formik.errors.phoneNumber))
        }
        helperText={formik.touched.phoneNumber && formik.errors.phoneNumber}
        autoFocus
        fullWidth
      />

      <TextField
        name="location"
        placeholder={t("common.labelLocation")}
        margin="normal"
        type="text"
        value={formik.values.location}
        onChange={formik.handleChange}
        error={formik.touched.location && Boolean(formik.errors.location)}
        helperText={formik.touched.location && formik.errors.location}
        fullWidth
      />

      <TextField
        name="website"
        placeholder={t("common.labelWebsite")}
        margin="normal"
        type="text"
        value={formik.values.website}
        onChange={formik.handleChange}
        error={formik.touched.website && Boolean(formik.errors.website)}
        helperText={formik.touched.website && formik.errors.website}
        fullWidth
      />

      <PrimaryButton
        type="submit"
        variant="contained"
        height="48px"
        fullWidth
        buttoncolor={selectedTheme.primaryPurple}
        textcolor="white"
      >
        {t("common.continue")}
      </PrimaryButton>
    </FormContainer>
  );
};

ThirdPartOfRegistration.propTypes = {
  children: PropTypes.node,
  handleSubmit: PropTypes.func,
  informations: PropTypes.any,
};

export default ThirdPartOfRegistration;
