import { RiLockPasswordLine } from 'react-icons/ri';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    MobileBlock,
    MobileButton,
} from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';

const ChangeEmailCodeInput = ({
    email,
    code,
    setCode,
    onConfirm,
    onResend,
    loading,
    resendLoading,
}: {
    email: string;
    code: string;
    setCode: (code: string) => void;
    onConfirm: () => void;
    onResend: () => void;
    loading: boolean;
    resendLoading: boolean;
}) => {
    const { isMobile } = useAppConfigStore();

    const sentMessage = Lang.key('changeEmailCodeSentTo').replace('{email}', email);

    if (isMobile) {
        return (
            <MobileBlock>
                <div className="my-4 px-2 text-sm text-gray-500 text-center">
                    {sentMessage}
                </div>
                <div className="px-2 mb-2 text-sm text-gray-500 text-center">
                    {Lang.key('changeEmailEnterCode')}
                </div>
                <Input
                    id="change-email-code"
                    name="one-time-code"
                    autoComplete="one-time-code"
                    icon={<RiLockPasswordLine />}
                    placeholder={Lang.key('emailCodeConfirmation')}
                    value={code}
                    onChange={(e) => setCode(e.target.value.trim())}
                    onKeyPress={(event) => {
                        if (event.key === 'Enter') {
                            onConfirm();
                        }
                    }}
                />
                <MobileButton
                    className="mt-2"
                    disabled={!code || loading}
                    onClick={onConfirm}
                >
                    {Lang.key('continue')}
                </MobileButton>
                <MobileButton
                    className="mt-2"
                    outline
                    disabled={resendLoading}
                    onClick={onResend}
                >
                    {Lang.key('resend_code')}
                </MobileButton>
            </MobileBlock>
        );
    }

    return (
        <div>
            <div className="mb-4 text-sm text-gray-500">{sentMessage}</div>
            <div className="mb-2 text-sm text-gray-500">{Lang.key('changeEmailEnterCode')}</div>
            <Input
                id="change-email-code"
                name="one-time-code"
                autoComplete="one-time-code"
                icon={<RiLockPasswordLine />}
                placeholder={Lang.key('emailCodeConfirmation')}
                value={code}
                onChange={(e) => setCode(e.target.value.trim())}
                onKeyPress={(event) => {
                    if (event.key === 'Enter') {
                        onConfirm();
                    }
                }}
            />
            <Button
                disabled={!code || loading}
                onClick={onConfirm}
                className="mt-2 w-full"
            >
                {Lang.key('continue')}
            </Button>
            <Button
                variant="outline"
                disabled={resendLoading}
                onClick={onResend}
                className="mt-2 w-full"
            >
                {Lang.key('resend_code')}
            </Button>
        </div>
    );
};

export default ChangeEmailCodeInput;
