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

import {
  Dices,
  XIcon,
} from 'lucide-react';

import { rpc } from '@/api/request';
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 { 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 [currentPassword, setCurrentPassword] = useState<string | null>(null);
    const [password, setPassword] = useState<string | null>(null);

    const onSaveNewPassword = () => {

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

        rpc.changePassword({
            currentPassword: currentPassword,
            newPassword: password
        }).then(() => {
            toast.success(Lang.key('new_password_saved_successfully'));
            setOpen(false);
        });


    }

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

            setPassword("");
            setCurrentPassword("");
            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
                        type='password'
                        className='w-full'
                        placeholder={Lang.key('enter_current_password')}
                        value={currentPassword ?? ''}
                        onChange={(e) => setCurrentPassword(e.target.value)}
                    />

                    <Input
                        className='w-full mt-4'
                        type='text'
                        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))}
                    >
                        <Dices /> {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'
                    type='text'
                    placeholder={Lang.key('enter_current_password')}
                    value={currentPassword ?? ''}
                    onChange={(e) => setCurrentPassword(e.target.value)}
                />
                <Input
                    className='w-full'
                    type='text'
                    placeholder={Lang.key('enter_new_password')}
                    value={password ?? ''}
                    onChange={(e) => setPassword(e.target.value)}
                />

                <Button
                    variant="outline"
                    className="w-full"
                    onClick={() => setPassword(generatePassword(16))}
                >
                    <Dices />  {Lang.key('generate_random_password')}
                </Button>
            </div>
        </SystemWindowDialog>
    )
});


export default ChangePasswordDialog;