"use client";
import LtrTextField from "@/core/components/LtrTextField";
import StyledForm from "@/core/components/StyledForm";
import { GET_USER_LOGIN_ROUTE } from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Lock, Person, PhoneCallback, Visibility, VisibilityOff } from "@mui/icons-material";
import { Button, Container, IconButton, InputAdornment, Stack, Typography } from "@mui/material";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { object, string } from "yup";

const LoginForm = () => {
    const [showPassword, setShowPassword] = useState(false);
    const requestServer = useRequest();
    const { setToken } = useAuth();
    const defaultValues = {
        username: "",
        password: "",
    };

    const validationSchema = object({
        username: string().required("لطفا نام کاربری را وارد کنید!"),
        password: string().required("لطفا رمز عبور را وارد کنید!"),
    });

    const {
        control,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm({
        defaultValues,
        resolver: yupResolver(validationSchema),
        mode: "all",
    });

    const handleClickShowPassword = () => setShowPassword((show) => !show);

    const onSubmit = async (data) => {
        try {
            const formData = new FormData();
            formData.append("username", data.username);
            formData.append("password", data.password);
            const response = await requestServer(GET_USER_LOGIN_ROUTE, "post", {
                data: formData,
            });
            setToken(response.data.data.token);
        } catch (error) { }
    };

    return (
        <Container maxWidth="xs" sx={{ flex: 1 }}>
            <StyledForm onSubmit={handleSubmit(onSubmit)} style={{ width: "100%", height: "100%" }}>
                <Stack sx={{ width: "100%", height: "100%" }} justifyContent="center" alignItems="center" spacing={6}>
                    <Stack sx={{ width: "100%", mb: 2 }} justifyContent="center" alignItems="center">
                        <Typography variant="h4" color="primary" fontWeight={600} textAlign="center">
                            ورود به سامانه CRM
                        </Typography>
                    </Stack>
                    <Stack sx={{ width: "100%", p: 2 }} spacing={4}>
                        <Stack spacing={2}>
                            <Controller
                                control={control}
                                render={({ field, fieldState: { error } }) => {
                                    return (
                                        <LtrTextField
                                            {...field}
                                            label="نام کاربری"
                                            variant="outlined"
                                            slotProps={{
                                                input: {
                                                    endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Person />
                                                        </InputAdornment>
                                                    ),
                                                },
                                            }}
                                            fullWidth
                                            error={!!error}
                                            helperText={!!error && error.message}
                                        />
                                    );
                                }}
                                name={"username"}
                            />
                            <Controller
                                control={control}
                                render={({ field, fieldState: { error } }) => {
                                    return (
                                        <LtrTextField
                                            {...field}
                                            label="رمزعبور"
                                            variant="outlined"
                                            type={showPassword ? "text" : "password"}
                                            slotProps={{
                                                input: {
                                                    startAdornment: (
                                                        <InputAdornment position="start">
                                                            <IconButton onClick={handleClickShowPassword}>
                                                                {showPassword ? <VisibilityOff /> : <Visibility />}
                                                            </IconButton>
                                                        </InputAdornment>
                                                    ),
                                                    endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Lock />
                                                        </InputAdornment>
                                                    ),
                                                },
                                            }}
                                            fullWidth
                                            error={!!error}
                                            helperText={!!error && error.message}
                                        />
                                    );
                                }}
                                name={"password"}
                            />
                        </Stack>
                        <Stack>
                            <Button
                                variant="contained"
                                color="primary"
                                size="large"
                                type={"submit"}
                                disabled={isSubmitting}
                            >
                                {isSubmitting ? "درحال ورود..." : "ورود"}
                            </Button>
                        </Stack>
                    </Stack>
                </Stack>
            </StyledForm>
        </Container>
    );
};
export default LoginForm;