'use client';

import { useState } from 'react';
import { Box, TextField, Button, Typography } from '@mui/material';

export default function Page() {
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [error, setError] = useState(false);

    const handleChangePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
        setPassword(e.target.value);
        if (confirmPassword || error) setError(e.target.value !== confirmPassword);
    };

    const handleConfirmPassword = (e: React.ChangeEvent<HTMLInputElement>) => {
        setConfirmPassword(e.target.value);
        setError(e.target.value !== password);
    };

    const handleSubmit = () => {
        if (!error && password) {
            setPassword('');
            setConfirmPassword('');
        }
    };

    return (
        <Box sx={{ p: 2 }}>
            <Typography variant='h6' fontWeight='bold' mb={2}>
                {"Parolni o'zgartirish"}
            </Typography>

            <Box sx={{ display: 'flex', gap: '10px', alignItems: 'start' }}>
                <TextField fullWidth label='Yangi parol' type='password' value={password} onChange={handleChangePassword} margin='normal' />

                <TextField
                    fullWidth
                    label='Parolni tasdiqlash'
                    type='password'
                    value={confirmPassword}
                    onChange={handleConfirmPassword}
                    margin='normal'
                    error={error}
                    helperText={error ? 'Parollar mos kelmadi!' : ''}
                />
            </Box>
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'end',
                    transition: 'all 0.6s ease-out',
                    opacity: password ? '1' : '0',
                }}
            >
                <Button
                    fullWidth
                    variant='contained'
                    color='primary'
                    sx={{ width: '180px' }}
                    onClick={handleSubmit}
                    disabled={error || !password || !confirmPassword}
                >
                    Tasdiqlash
                </Button>
            </Box>
        </Box>
    );
}
