
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Input, Stack, Text } from "@chakra-ui/react"
import { useForm } from "react-hook-form";
import { Button } from "../../components/ui/button";
import EnterOTP from "./EnterOTP";
import { useProfilePasswordMutation } from "../../Redux/Service/profile.password";
import { useState } from "react";
import { Toaster, toaster } from "../../components/ui/toaster";

type FormData = {
    password: string;
};

function EnterPassword() {
    const [profilePassword] = useProfilePasswordMutation();
    const [isSuccess, setIsSuccess] = useState(false);
    const [isDialogOpen, setIsDialogOpen] = useState(false);

    const {
        register,
        handleSubmit,
        formState: { errors },
        reset,
    } = useForm<FormData>();

    const onSubmit = async (data: FormData) => {
        if (!data.password) {
            return
        }
        try {
            await profilePassword({ password: data.password }).unwrap();
            setIsSuccess(true);
            reset();
            setIsDialogOpen(false);
            // Handle success (e.g., show a success message or redirect)
        } catch (error: any) {
            // Handle error (e.g., show an error message)
            toaster.create({
                title: error?.data.message || "Invalid password",
                type: "error",
            });
            console.error("Password change failed:", error.data.message);
            setIsSuccess(false);
        }
    };
    return (
        <>

            <DialogRoot placement="center"
                open={isDialogOpen}
                onOpenChange={(details) => setIsDialogOpen(details.open)}
            >
                <DialogTrigger asChild>
                    <Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2} >
                        Change Password
                    </Button>

                </DialogTrigger>
                <DialogContent
                    bg={"#fff"}
                    // w={{ lg: "60%", md: "230px" }}
                    w={{ base: '90%', md: '400px' }}

                    // height={'80vh'}
                    // overflow={'scroll'}
                    p={2} // Reduced padding
                    bgSize={'md'}
                >
                    <DialogHeader bg="white" pt={3} pb={2} >
                        <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
                    </DialogHeader>
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <DialogBody bg="white" pt={5}>
                            <Stack p={2} >
                                <Field.Root>
                                    <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
                                    <Input
                                        color="black"
                                        pl={1}
                                        fontSize="12px"
                                        height="30px"
                                        type="password"
                                        border={errors.password ? "1px solid red" : "1px solid grey"}
                                        {...register("password", {
                                            required: "Password is required",
                                            minLength: {
                                                value: 8,
                                                message: "Password must be at least 8 characters",
                                            },
                                        })}
                                    />
                                    {errors.password && (
                                        <Text color="red.500" fontSize="xs" mt={1}>
                                            {errors.password.message}
                                        </Text>
                                    )}
                                </Field.Root>
                            </Stack>
                        </DialogBody>
                        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
                        >
                            {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button> */}
                            <Button type="submit" w="100%" bg="#02A0A0" color={"#fff"}>
                                Submit
                            </Button>
                        </DialogFooter>

                        <DialogCloseTrigger color="black" />
                    </form>
                </DialogContent>
            </DialogRoot >
            {isSuccess && (<EnterOTP
                onClose={() => {
                    setIsSuccess(false);
                    setIsDialogOpen(false);
                }}
                isOpen={isSuccess}
            />)
            }
            <Toaster />
        </>

    )
}

export default EnterPassword