import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Box, Input, Stack, Text } from "@chakra-ui/react"
import { Button } from "../../components/ui/button";
import { useState } from "react";
import { BiSolidEdit } from "react-icons/bi";

function EnterOTP() {
    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);

    // Handle change for OTP inputs
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
        const value = e.target.value;

        // Prevent non-numeric input
        if (/[^0-9]/.test(value)) return;

        // Update the OTP state with the new value
        const newOtp = [...otp];
        newOtp[index] = value;
        setOtp(newOtp);

        // Move focus to the next input automatically
        if (value && index < otp.length - 1) {
            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
            if (nextInput) nextInput.focus();
        }
    };

    return (

        <DialogRoot placement="center">
            <DialogTrigger asChild>
                <Button w="100%" bg="#02A0A0" color={"#fff"}>
                    Save
                </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}>
                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white" pt={2}>
                    <Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
                    <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
                        <BiSolidEdit color="black" />
                        <Text color="black" textAlign="center" ml={2}>9619565889</Text>
                    </Box>


                    <Stack direction="row" justify="center" pt={2}>

                        {/* 4 OTP Inputs */}
                        {otp.map((digit, index) => (
                            <Input
                                key={index}
                                id={`otp-input-${index}`}
                                value={digit}
                                maxW="50px"
                                color={"black"}
                                textAlign="center"
                                fontSize="20px"
                                placeholder="0"
                                border="1px solid grey"
                                onChange={(e) => handleChange(e, index)}
                                maxLength={1} // Only allows 1 character per input
                            />
                        ))}
                    </Stack>
                    <Box textAlign="center">
                        <Text
                            color="#4746F4"
                            textDecoration="underline"
                            fontWeight="bold"
                            mt={3}
                            cursor="pointer"
                            display="inline-block"
                            px={2} // Adds padding for better appearance
                        >
                            Resend OTP
                        </Text>
                    </Box>

                </DialogBody>
                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
                >
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
                </DialogFooter>

                {/* <DialogCloseTrigger color="black" /> */}
            </DialogContent>
        </DialogRoot >

    )
}

export default EnterOTP