import React, {
    createRef,
    forwardRef,
    useImperativeHandle,
    useState,
} from 'react';

import { XIcon } from 'lucide-react';

import {
    generatePassword,
} from '@/components/CollectionFields/components/ItemData/PasswordData';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import {
    MobileBlock,
    MobileButton,
    MobileLink,
    MobileNavbar,
    MobilePage,
    MobilePopup,
} from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';
import { useMainPage } from '@/stores/mainPage';

import { toast } from './ToastRoot';

type ChangePasswordDialogRefProps = {
    open: () => void;
    close: () => void;
}


export const changePasswordDialogRef = createRef<ChangePasswordDialogRefProps>();

const ChangePasswordDialog = forwardRef<ChangePasswordDialogRefProps>((prps, ref) => {

    const [localValue, setLocalValue] = useState<string | null>(null);

    const { isMobile } = useAppConfigStore();

    const [open, setOpen] = useState(false);

    const [password, setPassword] = useState<string | null>(null);

    const { saveProfile } = useMainPage();

    const onSaveNewPassword = () => {

        if (!password) {
            toast.error(Lang.key('enter_new_password'));
            return;
        }

        saveProfile({
            password: password
        }).then(() => {
            toast.success(Lang.key('new_password_saved_successfully'));
            setOpen(false);
        }).catch((error) => {
            toast.error(Lang.key('error_saving_new_password'));
        });

    }

    useImperativeHandle(ref, () => ({
        open: () => {

            setPassword("");
            setOpen(true);
        },
        close: () => {
            setOpen(false);

        }
    }));
    if (isMobile) {

        return <MobilePopup
            opened={open}
            onBackdropClick={() => setOpen(false)}
        >
            <MobilePage>
                <MobileNavbar
                    title={Lang.key('change_password')}
                    right={<MobileLink onClick={() => setOpen(false)}><XIcon /></MobileLink>}
                />

                <MobileBlock outline>
                    <Input
                        className='w-full'
                        value={localValue ?? ''}
                        placeholder={Lang.key('enter_new_password')}
                        onChange={(e) => setLocalValue(e.target.value)}
                    />

                </MobileBlock>
                <MobileBlock outline>
                    <MobileButton

                        outline
                        style={{ width: '100%' }}
                        onClick={() => setLocalValue(generatePassword(16))}
                    >
                        {Lang.key('generate_random_password')}
                    </MobileButton>



                    <MobileButton
                        className='mt-4'
                        disabled={!password}
                        onClick={() => {
                            onSaveNewPassword();
                        }}>
                        {Lang.key("save_new_password")}
                    </MobileButton></MobileBlock>

            </MobilePage>
        </MobilePopup>
    }

    return <Dialog
        open={open}

        onOpenChange={(val) => {
            if (!val) {
                setOpen(false);
            }
        }}
    >


        <DialogContent >
            <DialogTitle>{Lang.key('change_password')}</DialogTitle>
            <Input
                className='w-full'
                value={localValue ?? ''}
                onChange={(e) => setLocalValue(e.target.value)}
            />

            <Button

                variant="outline"
                style={{ width: '100%' }}
                onClick={() => setLocalValue(generatePassword(16))}
            >
                {Lang.key('generate_random_password')}
            </Button>



            <Button
                disabled={!password}
                onClick={() => {
                    onSaveNewPassword();
                }}>
                {Lang.key("save_new_password")}
            </Button>
            <Button onClick={() => setOpen(false)}>
                {Lang.key("cancel")}
            </Button>
        </DialogContent>
    </Dialog>
});


export default ChangePasswordDialog;