import Notifications from "@/core/components/notifications";
import StyledForm from "@/core/components/StyledForm";
import useDirection from "@/lib/app/hooks/useDirection";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import { Box, Button, Stack, TextField } from "@mui/material";
import { Field, Formik } from "formik";
import { useTranslations } from "next-intl";
import Image from "next/image";

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

  const initialValues = {
    name: "",
    phone_number: "",
    vehicle_type: "",
    plate_number: "",
    province: "",
    navgan_id: "",
    national_code: "",
    shenasname_id: "",
    national_card_img: "",
    shenasname_img: "",
  };

  const handleSubmit = async (values, props) => {
    Notifications(directionApp, t, undefined);
    await axios
      .post(SEND_LOAN_REQUEST_NAVGAN, {
        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,
      })
      .then(function (response) {
        Notifications(directionApp, t, response);
      })
      .catch(function (error) {
        Notifications(directionApp, t, error.response);
        props.setSubmitting(false);
      });
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      {(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"
                  InputProps={{
                    readOnly: true,
                  }}
                  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"
                  InputProps={{
                    readOnly: true,
                  }}
                  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"
                  InputProps={{
                    readOnly: true,
                  }}
                  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"
                  InputProps={{
                    readOnly: true,
                  }}
                  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"
                  InputProps={{
                    readOnly: true,
                  }}
                  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="navgan_id"
                  variant="outlined"
                  size="small"
                  InputProps={{
                    readOnly: true,
                  }}
                  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"
                  InputProps={{
                    readOnly: true,
                  }}
                  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"
                  InputProps={{
                    readOnly: true,
                  }}
                  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%",
              }}
            >
              <Box>
                <Image
                  width={300}
                  height={300}
                  src="/images/login.svg"
                  priority
                  alt={t("app_name")}
                />
              </Box>
              <Box>
                <Image
                  width={300}
                  height={300}
                  src="/images/login.svg"
                  priority
                  alt={t("app_name")}
                />
              </Box>
            </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;