import Notifications from "@/core/components/notifications";
import SelectBox from "@/core/components/SelectBox";
import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import {
  GET_PROVINCE_LIST,
  SEND_LOAN_REQUEST_NAVGAN,
} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import useUser from "@/lib/app/hooks/useUser";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import { Box, Button, Stack, TextField } from "@mui/material";
import axios from "axios";
import { Field, Formik } from "formik";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import * as Yup from "yup";

const NavyForm = () => {
  const t = useTranslations();
  const { directionApp } = useDirection();
  const { token } = useUser();

  // get province list
  const [provinceList, setProvinceList] = useState([]);
  useEffect(() => {
    axios
      .get(GET_PROVINCE_LIST, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then(({ data }) => {
        const formattedData = data.map((province, index) => ({
          id: index,
          name: province.name,
          value: province.id,
        }));
        setProvinceList(formattedData);
      })
      .catch((error) => {
        Notifications(directionApp, t, error.response);
      });
  }, []);
  // end get province list

  // upload files
  const [selectedImageShenasname, setSelectedImageShenasname] = useState(
    "/images/upload-image.svg"
  );
  const [fileTypeShenasname, setFileTypeShenasname] = useState(null);
  const [fileNameShenasname, setFileNameShenasname] = useState(null);
  const [selectedImageNationalCard, setSelectedImageNationalCard] = useState(
    "/images/upload-image.svg"
  );
  const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null);
  const [fileNameNationalCard, setFileNameNationalCard] = useState(null);

  const handleUploadChangeShenasname = (event, setFieldValue) => {
    const uploadedFile = event.target?.files?.[0];
    if (uploadedFile) {
      const fileType = event.target?.files?.[0].type;
      const fileName = event.target?.files?.[0].name;
      setSelectedImageShenasname(URL.createObjectURL(uploadedFile));
      setFileTypeShenasname(fileType);
      setFileNameShenasname(fileName);
      setFieldValue("shenasname_img", uploadedFile);
    }
  };
  const handleUploadChangeNationalCard = (event, setFieldValue) => {
    const uploadedFile = event.target?.files?.[0];
    const fileType = event.target.files[0].type;
    const fileName = event.target.files[0].name;
    if (uploadedFile) {
      setSelectedImageNationalCard(URL.createObjectURL(uploadedFile));
      setFileTypeNationalCard(fileType);
      setFileNameNationalCard(fileName);
      setFieldValue("national_card_img", uploadedFile);
    }
  };
  // end upload files

  // initial values
  const initialValues = {
    name: "",
    phone_number: "",
    vehicle_type: "",
    plate_number: "",
    province: "",
    navgan_id: "",
    national_code: "",
    shenasname_id: "",
    national_card_img: null,
    shenasname_img: null,
  };
  // end initial values

  // validation
  const validationSchema = Yup.object().shape({
    name: Yup.string().required(t("LoanRequest.error_message_required")),
    phone_number: Yup.string().required(
      t("LoanRequest.error_message_required")
    ),
    vehicle_type: Yup.string().required(
      t("LoanRequest.error_message_required")
    ),
    plate_number: Yup.string().required(
      t("LoanRequest.error_message_required")
    ),
    navgan_id: Yup.string().required(t("LoanRequest.error_message_required")),
    province: Yup.string().required(t("LoanRequest.error_message_required")),
    national_code: Yup.string().required(
      t("LoanRequest.error_message_required")
    ),
    shenasname_id: Yup.string().required(
      t("LoanRequest.error_message_required")
    ),
  });
  // end validation

  // submit
  const handleSubmit = async (values, props) => {
    Notifications(directionApp, t, undefined);
    const formData = new FormData();
    formData.append("name", values.name);
    formData.append("phone_number", values.phone_number);
    formData.append("vehicle_type", values.vehicle_type);
    formData.append("plate_number", values.plate_number);
    formData.append("province_id", values.province);
    formData.append("navgan_id", values.navgan_id);
    formData.append("national_code", values.national_code);
    formData.append("shenasname_id", values.shenasname_id);
    if (values.shenasname_img != null)
      formData.append("shenasname_image", values.shenasname_img);
    if (values.national_card_img != null)
      formData.append("national_card_image", values.national_card_img);

    await axios
      .post(SEND_LOAN_REQUEST_NAVGAN, formData, {
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "multipart/form-data",
        },
      })
      .then(function (response) {
        Notifications(directionApp, t, response);
      })
      .catch(function (error) {
        Notifications(directionApp, t, error.response);
        props.setSubmitting(false);
      });
  };
  // end submit

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={validationSchema}
    >
      {(props) => (
        <Stack
          spacing={2}
          sx={{
            p: 1,
            width: "100%",
          }}
        >
          <StyledForm sx={{ width: "100%" }}>
            <Box
              sx={{
                display: "flex",
                flexDirection: { xs: "column", sm: "row" },
                alignItems: "start",
                justifyContent: "center",
                width: "100%",
              }}
            >
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="name"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_name")}
                  placeholder={t("LoanRequest.text_field_enter_your_name")}
                  type={"text"}
                  error={props.touched.name && props.errors.name ? true : false}
                  fullWidth
                  helperText={props.touched.name ? props.errors.name : null}
                />
              </Box>
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="phone_number"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_phone_number")}
                  placeholder={t(
                    "LoanRequest.text_field_enter_your_phone_number"
                  )}
                  type={"text"}
                  error={
                    props.touched.phone_number && props.errors.phone_number
                      ? true
                      : false
                  }
                  fullWidth
                  helperText={
                    props.touched.phone_number
                      ? props.errors.phone_number
                      : null
                  }
                />
              </Box>
            </Box>
            <Box
              sx={{
                display: "flex",
                flexDirection: { xs: "column", sm: "row" },
                alignItems: "start",
                justifyContent: "center",
                width: "100%",
              }}
            >
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="vehicle_type"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_vehicle_type")}
                  placeholder={t(
                    "LoanRequest.text_field_enter_your_vehicle_type"
                  )}
                  type={"text"}
                  error={
                    props.touched.vehicle_type && props.errors.vehicle_type
                      ? true
                      : false
                  }
                  fullWidth
                  helperText={
                    props.touched.vehicle_type
                      ? props.errors.vehicle_type
                      : null
                  }
                />
              </Box>
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="plate_number"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_plate_number")}
                  placeholder={t(
                    "LoanRequest.text_field_enter_your_plate_number"
                  )}
                  type={"text"}
                  error={
                    props.touched.plate_number && props.errors.plate_number
                      ? true
                      : false
                  }
                  fullWidth
                  helperText={
                    props.touched.plate_number
                      ? props.errors.plate_number
                      : null
                  }
                />
              </Box>
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  name="province"
                  label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
                  size="small"
                  selectType="province"
                  component={SelectBox}
                  selectors={provinceList}
                  select={props.values.province}
                  setFieldValue={props.setFieldValue}
                  setFieldTouched={props.setFieldTouched}
                  error={
                    props.touched.gender && props.errors.province ? true : false
                  }
                  helperText={
                    props.touched.gender ? props.errors.province : null
                  }
                />
              </Box>
            </Box>
            <Box
              sx={{
                display: "flex",
                flexDirection: { xs: "column", sm: "row" },
                alignItems: "start",
                justifyContent: "center",
                width: "100%",
              }}
            >
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="navgan_id"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_navgan_id")}
                  placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
                  type={"text"}
                  error={
                    props.touched.navgan_id && props.errors.navgan_id
                      ? true
                      : false
                  }
                  fullWidth
                  helperText={
                    props.touched.navgan_id ? props.errors.navgan_id : null
                  }
                />
              </Box>
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="national_code"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_national_code")}
                  placeholder={t(
                    "LoanRequest.text_field_enter_your_national_code"
                  )}
                  type={"text"}
                  error={
                    props.touched.national_code && props.errors.national_code
                      ? true
                      : false
                  }
                  fullWidth
                  helperText={
                    props.touched.national_code
                      ? props.errors.national_code
                      : null
                  }
                />
              </Box>
              <Box
                sx={{
                  mx: { xs: 0, sm: 2 },
                  my: 2,
                  width: "100%",
                }}
              >
                <Field
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="shenasname_id"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_shenasname_id")}
                  placeholder={t(
                    "LoanRequest.text_field_enter_your_shenasname_id"
                  )}
                  type={"text"}
                  error={
                    props.touched.shenasname_id && props.errors.shenasname_id
                      ? true
                      : false
                  }
                  fullWidth
                  helperText={
                    props.touched.shenasname_id
                      ? props.errors.shenasname_id
                      : null
                  }
                />
              </Box>
            </Box>
            <Box
              sx={{
                display: "flex",
                flexDirection: { xs: "column", sm: "row" },
                alignItems: "center",
                justifyContent: "space-around",
                width: "100%",
              }}
            >
              <UploadSystem
                selectedImage={selectedImageShenasname}
                handleUploadChange={(e) =>
                  handleUploadChangeShenasname(e, props.setFieldValue)
                }
                setselectedImage={setSelectedImageShenasname}
                setFieldValue={props.setFieldValue}
                fieldname="shenasname_img"
                fileType={fileTypeShenasname}
                fileName={fileNameShenasname}
                imageAlt={t("app_name")}
                imageSize={[300 /*width*/, 150 /*height*/]}
                label={t("LoanRequest.file_field_shenasname_image")}
              />
              <UploadSystem
                selectedImage={selectedImageNationalCard}
                handleUploadChange={(e) =>
                  handleUploadChangeNationalCard(e, props.setFieldValue)
                }
                setselectedImage={setSelectedImageNationalCard}
                setFieldValue={props.setFieldValue}
                fieldname="national_card_img"
                fileType={fileTypeNationalCard}
                fileName={fileNameNationalCard}
                imageAlt={t("app_name")}
                imageSize={[300 /*width*/, 150 /*height*/]}
                label={t("LoanRequest.file_field_national_card_image")}
              />
            </Box>
            <Box
              sx={{
                display: "flex",
                flexDirection: { xs: "column", sm: "row" },
                alignItems: "center",
                mx: "auto",
                width: { xs: "100%", sm: "30%", md: "25%" },
              }}
            >
              <Button
                fullWidth
                type="submit"
                variant="contained"
                size="large"
                endIcon={<DataSaverOnIcon />}
                disabled={props.isSubmitting ? true : false}
              >
                {t("LoanRequest.button_submit")}
              </Button>
            </Box>
          </StyledForm>
        </Stack>
      )}
    </Formik>
  );
};

export default NavyForm;