import ResendToken from "@/core/components/ResendToken";
import StyledForm from "@/core/components/StyledForm";
import {LOGIN} from "@/core/data/apiRoutes";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useUser from "@/lib/app/hooks/useUser";
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
import LoginIcon from "@mui/icons-material/Login";
import {Box, Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import SvgLogin from "@/core/components/svgs/SvgLogin";
import useRequest from "@/lib/app/hooks/useRequest";
import AutoSubmit from "@/core/components/AutoSubmit";

const SendTokenComponent = ({
                                PhoneNumber,
                                setOtpToken,
                                timer,
                                setTimer,
                                initialTimerValue,
                            }) => {
    const t = useTranslations();
    const requestServer = useRequest();
    const {setToken} = useUser();

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

    const handleSubmit = (values, props) => {
        requestServer(LOGIN, "post", {
            auth: false, data: {
                phone_number: values.phone_number,
                verification_code: values.verification_code,
            }
        })
            .then(function (response) {
                setToken(response.data.token);
            }).catch(function (error) {
            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'
                                    >
                                        <SvgLogin width={300} height={200}/>
                                    </Stack>
                                    <Typography margin={2} variant="h4" textAlign="center">
                                        {t("login")}
                                    </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)
                                                }
                                                fullWidth
                                                helperText={
                                                    props.touched.verification_code
                                                        ? props.errors.verification_code
                                                        : null
                                                }
                                            />
                                            <AutoSubmit/>
                                            <Grid container>
                                                <Grid item xs={12}>
                                                    <Button
                                                        fullWidth
                                                        type="submit"
                                                        variant="contained"
                                                        size="large"
                                                        endIcon={<LoginIcon/>}
                                                        disabled={props.isSubmitting}
                                                    >
                                                        {t("LoginPage.button_submit")}
                                                    </Button>
                                                </Grid>
                                            </Grid>
                                            <ResendToken
                                                initialTimerValue={initialTimerValue}
                                                timer={timer}
                                                setTimer={setTimer}
                                                PhoneNumber={PhoneNumber}
                                                disabled={props.isSubmitting}
                                            />
                                        </Stack>
                                    </StyledForm>
                                </Stack>
                            )}
                        </Formik>
                    </Paper>
                </Container>
            </CenterLayout>
        </FullPageLayout>
    );
};

export default SendTokenComponent;