import React, { useRef } from "react";

import { Formik } from "formik";
import * as yup from "yup";
import { useTranslation } from "next-i18next";
import Image from "next/image";

import Button from "../../atoms/button";
import jobsService from "../../../services/jobsService";
import showSuccessToast from "../../../helpers/showSuccessToast";
import showErrorToast from "../../../helpers/showErrorToast";

import styles from "./CareerForm.module.scss";

import uploadIcon from "../../../public/icons/Career/upload.svg";

const getSchema = (t: any) =>
  yup.object().shape({
    jobTitle: yup.string().required(t("Job Title is required")),
    name: yup.string().required(t("Name is required")),
    email: yup.string().email().required(t("Email is required")),
    phoneNumber: yup.string().required(t("Phone Number is required")),
    cvFile: yup.mixed().required(t("File is required")),
  });

const CareerForm = ({ data, selectedJob }: any) => {
  const { t } = useTranslation("common");

  const uploadRef = useRef<any>();

  const handleUploadClick = () => {
    uploadRef.current.click();
  };

  return (
    <Formik
      validationSchema={getSchema(t)}
      enableReinitialize
      initialValues={{
        jobTitle: selectedJob as string,
        name: "",
        email: "",
        phoneNumber: "",
        cvFile: null as null | File,
      }}
      onSubmit={({ name, phoneNumber, jobTitle, email, cvFile }, { resetForm }) => {
        const formData = new FormData();
        formData.append("job_id", jobTitle);
        formData.append("name", name);
        formData.append("email", email);
        formData.append("phone", phoneNumber);
        formData.append("cv", cvFile as Blob);
        formData.append("message", "");
        jobsService
          .postJob(formData)
          .then((res) => {
            resetForm();
            showSuccessToast(res.data);
          })
          .catch((e) => {
            showErrorToast(e.message);
          });
      }}
    >
      {({ values, errors, touched, handleBlur, handleSubmit, setFieldValue }) => {
        const handleSelectFiles = (e: any) => {
          const { files } = e.target;
          setFieldValue("cvFile", files[0]);
        };

        return (
          <form action="" className={styles.careerForm} onSubmit={handleSubmit}>
            <div className="mb-8">
              <select
                name="jobTitle"
                id="jobTitle"
                className="mb-2"
                value={values.jobTitle}
                onChange={(e) => setFieldValue("jobTitle", e.target.value)}
                onBlur={handleBlur}
              >
                <option disabled selected value="" className="text-black">
                  {t("Select the job title")}
                </option>

                {data.map(({ id, title }: any) => (
                  <option key={id} value={id} className="text-black">
                    {title}
                  </option>
                ))}
              </select>

              {errors?.jobTitle && touched?.jobTitle && (
                <div className="text-red-2">{errors?.jobTitle}</div>
              )}
            </div>

            <div className="mb-8">
              <input
                name="name"
                id="name"
                type="text"
                className="mb-2"
                placeholder={t("Your name") || "Your name"}
                value={values.name}
                onChange={(e) => setFieldValue("name", e.target.value)}
                onBlur={handleBlur}
              />

              {errors?.name && touched?.name && <div className="text-red-2">{errors?.name}</div>}
            </div>

            <div className="mb-8">
              <input
                name="email"
                id="email"
                type="text"
                className="mb-2"
                placeholder={t("Email") || "Email"}
                value={values.email}
                onChange={(e) => setFieldValue("email", e.target.value)}
                onBlur={handleBlur}
              />

              {errors?.email && touched?.email && <div className="text-red-2">{errors?.email}</div>}
            </div>

            <div className="mb-8">
              <input
                name="phoneNumber"
                id="phone-number"
                type="text"
                className="mb-2"
                placeholder={t("Phone number") || "Phone number"}
                value={values.phoneNumber}
                onChange={(e) => setFieldValue("phoneNumber", e.target.value)}
                onBlur={handleBlur}
              />

              {errors?.phoneNumber && touched?.phoneNumber && (
                <div className="text-red-2">{errors?.phoneNumber}</div>
              )}
            </div>

            <div className="mb-8">
              <button type="button" className="mb-2 box" onClick={handleUploadClick}>
                <div className="flex justify-between items-center">
                  <div>{values.cvFile ? values?.cvFile?.name : t("Upload your CV")}</div>

                  <div className="mr-1">
                    <Image src={uploadIcon} alt="" width={22.5} height={25} />
                  </div>
                </div>
              </button>

              {errors?.cvFile && touched?.cvFile && (
                <div className="text-red-2">{errors?.cvFile}</div>
              )}
            </div>

            <input
              hidden
              multiple
              type="file"
              ref={uploadRef}
              accept="application/pdf"
              name="imagesUpload"
              onChange={handleSelectFiles}
              onClick={(event: any) => {
                event.target.value = null;
              }}
            />

            <Button htmlType="submit">{t("Send")}</Button>
          </form>
        );
      }}
    </Formik>
  );
};

export default CareerForm;