'use client';

import { IRegisterProps } from '@/components/layout/landing-layout/header/components/IRegisterModal';
import { Box, Card, TextField } from '@mui/material';

export function IRegisterSecondStep({ formData, formDataChanging, dataErrors }: IRegisterProps) {
    const handleFrontChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (!e.target.files?.[0]) return;
        formDataChanging({
            key: 'passport_front',
            value: e.target.files[0],
        });
    };
    const handleBackChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (!e.target.files?.[0]) return;
        formDataChanging({
            key: 'passport_back',
            value: e.target.files[0],
        });
    };

    return (
        <Box display='flex' flexDirection='column' gap={2}>
            <TextField
                label='Passport Seriya/Raqami'
                variant='outlined'
                error={dataErrors.passport_serie}
                fullWidth
                value={formData.passport_serie}
                onChange={e => formDataChanging({ key: 'passport_serie', value: e.target.value })}
            />
            <TextField
                label='PINFL'
                variant='outlined'
                error={dataErrors.passport_pnfl}
                fullWidth
                value={formData.passport_pnfl}
                onChange={e => formDataChanging({ key: 'passport_pnfl', value: e.target.value })}
            />
            <Box>
                <Box sx={{ marginBottom: 1, fontWeight: 500 }}>Passport rasmi</Box>
                <Box display='flex' justifyContent='center' gap={3}>
                    <Box>
                        <Card
                            component='label'
                            sx={{
                                width: 100,
                                height: 100,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                bgcolor: '#f0f0f0',
                                cursor: 'pointer',
                                border: `1px solid ${dataErrors.passport_front ? "red" : "transparent"}`,
                                transition: 'all 0.6 ease-out'
                            }}
                        >
                            {formData.passport_front ? (
                                <Box
                                    component='img'
                                    src={URL.createObjectURL(formData.passport_front)}
                                    sx={{ maxWidth: '100%', maxHeight: '100%' }}
                                />
                            ) : (
                                <Box fontSize={14} color={'#444'}>
                                    Oldi rasmi
                                </Box>
                            )}
                            <input type='file' hidden accept='image/*' onChange={handleFrontChange} />
                        </Card>
                    </Box>
                    <Box>
                        <Card
                            component='label'
                            sx={{
                                width: 100,
                                height: 100,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                bgcolor: '#f0f0f0',
                                cursor: 'pointer',
                                border: `1px solid ${dataErrors.passport_back ? "red" : "transparent"}`,
                                transition: 'all 0.6 ease-out'
                            }}
                        >
                            {formData.passport_back ? (
                                <Box
                                    component='img'
                                    src={URL.createObjectURL(formData.passport_back)}
                                    sx={{ maxWidth: '100%', maxHeight: '100%' }}
                                />
                            ) : (
                                <Box fontSize={14} color={'#444'}>
                                    Orqa rasmi
                                </Box>
                            )}
                            <input type='file' hidden accept='image/*' onChange={handleBackChange} />
                        </Card>
                    </Box>
                </Box>
            </Box>
        </Box>
    );
}
