import Notifications from "@/core/components/notifications";
import StyledForm from "@/core/components/StyledForm";
import {REGISTER} from "@/core/data/apiRoutes";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useDirection from "@/lib/app/hooks/useDirection";
import LoginIcon from "@mui/icons-material/Login";
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
import {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
import axios from "axios";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import ResendToken from "@/core/components/ResendToken";
import useUser from "@/lib/app/hooks/useUser";
import SvgRegister from "@/core/components/svgs/SvgRegister";

const UserRegisterComponent = ({
                                   PhoneNumber,
                                   setOtpToken,
                                   initialTimerValue,
                                   timer,
                                   setTimer,
                               }) => {
    const t = useTranslations();
    const {directionApp} = useDirection();
    const {setToken} = useUser();

    const initialValues = {
        type_id: "2",
        verification_code: "",
        phone_number: PhoneNumber,
        national_id: "",
    };

    const validationSchema = Yup.object().shape({
        verification_code: Yup.string().required(
            t("RegisterPage.error_message_verification_code")
        ),
        national_id: Yup.string().required(
            t("RegisterPage.error_message_national_id")
        ),
    });

    const handleSubmit = async (values, props) => {
        Notifications(directionApp, t, undefined);
        console.log(initialValues);
        await axios
            .post(REGISTER, {
                type_id: values.type_id,
                national_id: values.national_id,
                phone_number: values.phone_number,
                verification_code: values.verification_code,
            })
            .then(function (response) {
                Notifications(directionApp, t, response);
                setOtpToken(true);
                setToken(response.data.token);
            })
            .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}}>
                                    <Stack
                                        sx={{width: "100%"}}
                                        alignItems='center'
                                    >
                                        <SvgRegister width={300} height={200}/>
                                    </Stack>
                                    <Typography margin={2} variant="h4" textAlign="center">
                                        {t("register_welfare_services")}
                                    </Typography>
                                    <StyledForm sx={{width: "100%"}}>
                                        <Stack spacing={3} sx={{p: 2}}>
                                            <Box
                                                sx={{
                                                    display: {xs: "column", sm: "flex"},
                                                    alignItems: "center",
                                                    textAlign: {xs: "center", sm: "unset"},
                                                    justifyContent: "space-between",
                                                }}
                                            >
                                                <Typography variant="button" sx={{display: "block"}}>
                                                    {t("LoginPage.sent_token_to")}: {PhoneNumber}
                                                </Typography>
                                                <Button
                                                    size="small"
                                                    startIcon={<ChangeCircleIcon/>}
                                                    variant="outlined"
                                                    onClick={() => setOtpToken(false)}
                                                    sx={{whiteSpace: "nowrap", my: {xs: 1, sm: 0}}}
                                                >
                                                    {t("LoginPage.change_phone_number")}
                                                </Button>
                                            </Box>
                                            <Field
                                                as={TextField}
                                                name="verification_code"
                                                variant="outlined"
                                                label={t("LoginPage.text_field_verification_code")}
                                                placeholder={t(
                                                    "LoginPage.text_field_enter_your_verification_code"
                                                )}
                                                type={"text"}
                                                error={
                                                    props.touched.verification_code &&
                                                    props.errors.verification_code
                                                        ? true
                                                        : false
                                                }
                                                fullWidth
                                                helperText={
                                                    props.touched.verification_code
                                                        ? props.errors.verification_code
                                                        : null
                                                }
                                            />
                                            <ResendToken
                                                initialTimerValue={initialTimerValue}
                                                timer={timer}
                                                setTimer={setTimer}
                                                PhoneNumber={PhoneNumber}
                                            />
                                            <Divider>
                                                <Chip label={t("RegisterPage.complete_information")}/>
                                            </Divider>
                                            <Field
                                                as={TextField}
                                                name="national_id"
                                                variant="outlined"
                                                label={t("RegisterPage.text_field_national_id")}
                                                placeholder={t(
                                                    "RegisterPage.text_field_enter_your_national_id"
                                                )}
                                                type={"text"}
                                                error={
                                                    props.touched.national_id && props.errors.national_id
                                                        ? true
                                                        : false
                                                }
                                                fullWidth
                                                helperText={
                                                    props.touched.national_id
                                                        ? props.errors.national_id
                                                        : null
                                                }
                                            />
                                            <Button
                                                fullWidth
                                                type="submit"
                                                variant="contained"
                                                size="large"
                                                endIcon={<LoginIcon/>}
                                                disabled={props.isSubmitting ? true : false}
                                            >
                                                {t("RegisterPage.button_submit")}
                                            </Button>
                                        </Stack>
                                    </StyledForm>
                                </Stack>
                            )}
                        </Formik>
                    </Paper>
                </Container>
            </CenterLayout>
        </FullPageLayout>
    );
};

export default UserRegisterComponent;