import ResendToken from "@/core/components/ResendToken";
import StyledForm from "@/core/components/StyledForm";
import { LOGIN } from "@/core/data/apiRoutes";
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 AutoSubmit from "@/core/components/AutoSubmit";
import { CenterLayout, FullPageLayout, useRequest, useUser } from "@witel/webapp-builder";

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")}
                                                value={props.values.verification_code}
                                                type={"tel"}
                                                onChange={(event) => {
                                                    const inputValue = event.target.value;
                                                    if (isNaN(Number(inputValue))) {
                                                        return;
                                                    }
                                                    props.handleChange({
                                                        target: {
                                                            name: "verification_code",
                                                            value: inputValue,
                                                        },
                                                    });
                                                }}
                                                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;