import Notifications from "@/core/components/notifications";
import LinkRouting from "@/core/components/LinkRouting";
import StyledForm from "@/core/components/StyledForm";
import { LOGIN_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useDirection from "@/lib/app/hooks/useDirection";
import FingerprintIcon from "@mui/icons-material/Fingerprint";
import PersonAddIcon from "@mui/icons-material/PersonAdd";
import {
  Box,
  Button,
  Container,
  Grid,
  Paper,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import axios from "axios";
import { Field, Formik } from "formik";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import * as Yup from "yup";

const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
  const t = useTranslations();
  const { directionApp } = useDirection();

  const searchParams = useSearchParams();
  const backUrlDecodedPath = searchParams.get("back_url");

  const initialValues = {
    phone_number: PhoneNumber,
  };
  const validationSchema = Yup.object().shape({
    phone_number: Yup.string().required(t("LoginPage.error_message_required")),
  });

  const handleSubmit = async (values, props) => {
    Notifications(directionApp, t, undefined);
    await axios
      .post(LOGIN_SEND_OTP_TOKEN, {
        phone_number: values.phone_number,
      })
      .then(function (response) {
        Notifications(directionApp, t, response);
        setPhoneNumber(values.phone_number);
        setOtpToken(true);
      })
      .catch(function (error) {
        Notifications(directionApp, t, error.response);
        props.setSubmitting(false);
      });
  };

  return (
    <FullPageLayout sx={{ p: 1 }}>
      <CenterLayout>
        <Container maxWidth="sm">
          <Paper elevation={0}>
            <Formik
              initialValues={initialValues}
              onSubmit={handleSubmit}
              validationSchema={validationSchema}
            >
              {(props) => (
                <Stack spacing={2} sx={{ p: 2 }}>
                  <Box
                    sx={{ position: "relative", width: "100%", height: 200 }}
                  >
                    <Image
                      fill
                      src="/images/login.svg"
                      priority
                      alt={t("app_name")}
                    />
                  </Box>
                  <Typography margin={2} variant="h4" textAlign="center">
                    {t("login_welfare_services")}
                  </Typography>
                  <StyledForm sx={{ width: "100%" }}>
                    <Stack spacing={3} sx={{ p: 2 }}>
                      <Field
                        as={TextField}
                        name="phone_number"
                        variant="outlined"
                        label={t("LoginPage.text_field_phone_number")}
                        placeholder={t(
                          "LoginPage.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
                        }
                      />
                      <Grid
                        container
                        rowSpacing={{ xs: 1, sm: 0 }}
                        sx={{
                          flexDirection: { xs: "column-reverse", sm: "row" },
                        }}
                      >
                        <Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
                          <LinkRouting href={"/register-welfare-services"}>
                            <Button
                              fullWidth
                              type="submit"
                              variant="outlined"
                              size="large"
                              endIcon={<PersonAddIcon />}
                              disabled={props.isSubmitting ? true : false}
                            >
                              {t("LoginPage.button_make_account")}
                            </Button>
                          </LinkRouting>
                        </Grid>
                        <Grid item xs={12} sm={6} sx={{ pl: { xs: 0, sm: 1 } }}>
                          <Button
                            fullWidth
                            type="submit"
                            variant="contained"
                            size="large"
                            endIcon={<FingerprintIcon />}
                            disabled={props.isSubmitting ? true : false}
                          >
                            {t("LoginPage.button_request_verification")}
                          </Button>
                        </Grid>
                      </Grid>
                    </Stack>
                  </StyledForm>
                </Stack>
              )}
            </Formik>
          </Paper>
        </Container>
      </CenterLayout>
      <Stack direction="row" alignItems="center" justifyContent="center">
        <LinkRouting
          sx={{ margin: 2 }}
          href={
            backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
          }
        >
          {t("LoginPage.link_routing_back_to")}{" "}
          {backUrlDecodedPath
            ? t("LoginPage.link_routing_previuos_page")
            : t("LoginPage.link_routing_main_page")}
        </LinkRouting>
      </Stack>
    </FullPageLayout>
  );
};

export default SendUserData;