"use client";

import {
    Chip,
    Divider,
    FormControl,
    FormHelperText,
    Grid,
    IconButton,
    InputAdornment,
    InputLabel,
    OutlinedInput,
} from "@mui/material";
import StyledForm from "@/core/components/StyledForm";
import { useForm } from "react-hook-form";
import useRequest from "@/lib/hooks/useRequest";
import { CHANGE_USER_PASSWORD } from "@/core/utils/routes";
import { object, string } from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useEffect, useState } from "react";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";

const validationSchema = object({
    current_password: string().required("اجباری"),
    new_password: string().required("اجباری"),
    repeat_new_password: string()
        .required("اجباری")
        .test("password-match", "رمز عبور جدید و تکرار آن باید یکسان باشند", function (value) {
            return this.parent.new_password === value;
        }),
});

const Form = ({ handleCloseForm, setLoading }) => {
    const request = useRequest();
    const [showNewPassword, setShowNewPassword] = useState();
    const [showRepeatNewPassword, setShowRepeatNewPassword] = useState();

    const defaultValues = {
        current_password: "",
        new_password: "",
        repeat_new_password: "",
    };

    const {
        register,
        handleSubmit,
        formState: { isSubmitting, errors },
    } = useForm({ defaultValues, resolver: yupResolver(validationSchema) });

    useEffect(() => {
        setLoading(isSubmitting);
    }, [isSubmitting]);

    const onSubmit = async (data) => {
        const formData = new FormData();
        formData.append("current_password", data.current_password);
        formData.append("new_password", data.new_password);
        try {
            await request(CHANGE_USER_PASSWORD, "post", { data: formData, signal: controller.signal });
            handleCloseForm();
        } catch (error) {}
    };

    return (
        <>
            <Divider sx={{ mb: 3 }}>
                <Chip color="primary" variant="outlined" label="تغییر رمز عبور" />
            </Divider>
            <StyledForm onSubmit={handleSubmit(onSubmit)} id={"ChangePassword"}>
                <Grid container columns={1} spacing={3}>
                    <Grid item xs={1}>
                        <FormControl error={!!errors.current_password} size="small" fullWidth variant="outlined">
                            <InputLabel htmlFor="current_password">رمز عبور فعلی</InputLabel>
                            <OutlinedInput
                                id="current_password"
                                label="رمز عبور فعلی"
                                autoComplete="off"
                                {...register("current_password")}
                                size="small"
                                fullWidth
                                type="text"
                            />
                            <FormHelperText id="current_password">
                                {errors.current_password ? errors.current_password.message : null}
                            </FormHelperText>
                        </FormControl>
                    </Grid>
                    <Grid item xs={1}>
                        <FormControl error={!!errors.new_password} size="small" fullWidth variant="outlined">
                            <InputLabel htmlFor="new_password">رمز عبور جدید</InputLabel>
                            <OutlinedInput
                                id="new_password"
                                autoComplete="off"
                                {...register("new_password")}
                                label="رمز عبور جدید"
                                size="small"
                                fullWidth
                                type={showNewPassword ? "text" : "password"}
                                endAdornment={
                                    <InputAdornment position="end">
                                        <IconButton
                                            aria-label="toggle password visibility"
                                            onClick={() => setShowNewPassword(!showNewPassword)}
                                            onMouseDown={(event) => event.preventDefault()}
                                            edge="end"
                                        >
                                            {showNewPassword ? <VisibilityOff /> : <Visibility />}
                                        </IconButton>
                                    </InputAdornment>
                                }
                            />
                            <FormHelperText id="new_password">
                                {errors.new_password ? errors.new_password.message : null}
                            </FormHelperText>
                        </FormControl>
                    </Grid>
                    <Grid item xs={1}>
                        <FormControl error={!!errors.repeat_new_password} size="small" fullWidth variant="outlined">
                            <InputLabel htmlFor="repeat_new_password">تکرار رمز عبور جدید</InputLabel>
                            <OutlinedInput
                                id="repeat_new_password"
                                autoComplete="off"
                                {...register("repeat_new_password")}
                                size="small"
                                fullWidth
                                label="تکرار رمز عبور جدید"
                                type={showRepeatNewPassword ? "text" : "password"}
                                endAdornment={
                                    <InputAdornment position="end">
                                        <IconButton
                                            aria-label="toggle password visibility"
                                            onClick={() => setShowRepeatNewPassword(!showRepeatNewPassword)}
                                            onMouseDown={(event) => event.preventDefault()}
                                            edge="end"
                                        >
                                            {showRepeatNewPassword ? <VisibilityOff /> : <Visibility />}
                                        </IconButton>
                                    </InputAdornment>
                                }
                            />
                            <FormHelperText id="repeat_new_password">
                                {errors.repeat_new_password ? errors.repeat_new_password.message : null}
                            </FormHelperText>
                        </FormControl>
                    </Grid>
                </Grid>
            </StyledForm>
        </>
    );
};
export default Form;
