import React from 'react';

import { LuLock } from 'react-icons/lu';

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, { useAppConfig } from '@/stores/appConfig';

const LoginPasswordInput = ({ login, password, setPassword, onPasswordAuth, loading, onForgotPassword }: { login?: string; password: string, setPassword: (password: string) => void, onPasswordAuth: () => void, loading: boolean, onForgotPassword: () => void }) => {

    const { isMobile } = useAppConfigStore();

    if (isMobile) {
        return <>
            <MobileBlock>
                {/* Hidden username field for password manager autofill on multi-step login */}
                {login && <input type="text" name="username" autoComplete="username" value={login} readOnly tabIndex={-1} className="absolute opacity-0 pointer-events-none h-0 w-0" aria-hidden />}
                <Input
                    className="my-2"
                    type="password"
                    icon={<LuLock />}
                    id="password"
                    name="password"
                    autoComplete="current-password"
                    placeholder={'Пароль'}
                    value={password}
                    security=""
                    onChange={(e) => setPassword(e.target.value)}
                    onKeyPress={(event: any) => {
                        if (event.key === 'Enter') {
                            onPasswordAuth();
                        }
                    }}
                />

                <MobileButton
                    className='mt-2'
                    disabled={!password || loading}
                    onClick={onPasswordAuth}
                >{Lang.key('continue')}</MobileButton>
                <MobileButton
                    outline
                    className='mt-2'
                    disabled={loading}
                    onClick={onForgotPassword}
                >{Lang.key('forgotPassword')}</MobileButton>
            </MobileBlock>
        </>
    }

    return <>
        {/* Hidden username field for password manager autofill on multi-step login */}
        {login && <input type="text" name="username" autoComplete="username" value={login} readOnly tabIndex={-1} className="absolute opacity-0 pointer-events-none h-0 w-0" aria-hidden />}
        <Input
            className="my-2"
            type="password"
            icon={<LuLock />}
            id="password"
            name="password"
            autoComplete="current-password"
            placeholder={'Пароль'}
            value={password}
            security=""
            onChange={(e) => setPassword(e.target.value)}
            onKeyPress={(event: any) => {
                if (event.key === 'Enter') {
                    onPasswordAuth();
                }
            }}
        />

        <Button
            disabled={!password || loading}

            onClick={onPasswordAuth}
            className='mt-2 w-full'

            variant="default"

        >{Lang.key('continue')}</Button>


        <Button
            disabled={loading}
            className='mt-2 w-full'
            onClick={onForgotPassword}

            variant="link"

        >{Lang.key('forgotPassword')}</Button>




    </>

}

export default LoginPasswordInput;