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 { Input } from '@/components/ui/input';
import {
    MobileBlock,
    MobileButton,
    MobileLink,
    MobileNavbar,
    MobilePage,
    MobilePopup,
} from '@/components/ui/mobile';
import { SystemWindowDialog } from '@/components/ui/system-window-dialog';
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 { 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={password ?? ''}
                        placeholder={Lang.key('enter_new_password')}
                        onChange={(e) => setPassword(e.target.value)}
                    />

                </MobileBlock>
                <MobileBlock outline>
                    <MobileButton

                        outline
                        style={{ width: '100%' }}
                        onClick={() => setPassword(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 (
        <SystemWindowDialog
            open={open}
            onOpenChange={(val) => {
                if (!val) {
                    setOpen(false);
                }
            }}
            title={Lang.key('change_password')}
            width={448}
            footer={
                <>
                    <Button variant="outline" onClick={() => setOpen(false)}>
                        {Lang.key("cancel")}
                    </Button>
                    <Button
                        disabled={!password}
                        onClick={() => onSaveNewPassword()}
                    >
                        {Lang.key("save_new_password")}
                    </Button>
                </>
            }
        >
            <div className="space-y-3">
                <Input
                    className='w-full'
                    value={password ?? ''}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <Button
                    variant="outline"
                    className="w-full"
                    onClick={() => setPassword(generatePassword(16))}
                >
                    {Lang.key('generate_random_password')}
                </Button>
            </div>
        </SystemWindowDialog>
    )
});


export default ChangePasswordDialog;