import Notifications from "@/core/components/notifications";
import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import { SEND_LOAN_REQUEST_WELFARE } from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
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 { useState } from "react";
import * as Yup from "yup";

const WelfareServicesForm = () => {
  const t = useTranslations();
  const { directionApp } = useDirection();

  // 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, validation and request action of form
  const initialValues = {
    name: "",
    phone_number: "",
    vehicle_type: "",
    plate_number: "",
    province: "",
    national_code: "",
    shenasname_id: "",
    national_card_img: null,
    shenasname_img: null,
  };

  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")
    ),
    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")
    ),
  });

  const handleSubmit = async (values, props) => {
    Notifications(directionApp, t, undefined);
    console.log(values.national_card_img);
    console.log(values.shenasname_img);
    await axios
      .post(SEND_LOAN_REQUEST_WELFARE, {
        name: values.name,
        phone_number: values.phone_number,
        vehicle_type: values.vehicle_type,
        plate_number: values.plate_number,
        province_id: values.province,
        navgan_id: values.navgan_id,
        national_code: values.national_code,
        shenasname_id: values.shenasname_id,
        national_card_image: values.national_card_img,
        shenasname_image: values.shenasname_img,
      })
      .then(function (response) {
        Notifications(directionApp, t, response);
      })
      .catch(function (error) {
        Notifications(directionApp, t, error.response);
        props.setSubmitting(false);
      });
  };
  // end initial values, validation and request action of form

  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
                  as={TextField}
                  sx={{ width: "100%" }}
                  name="province"
                  variant="outlined"
                  size="small"
                  label={t("LoanRequest.text_field_province")}
                  placeholder={t("LoanRequest.text_field_enter_your_province")}
                  type={"text"}
                  error={
                    props.touched.province && props.errors.province
                      ? true
                      : false
                  }
                  fullWidth
                  helperText={
                    props.touched.province ? 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="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",
                my: 2,
                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 WelfareServicesForm;