import { useState, useMemo } from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
import { useTranslation } from 'react-i18next';

export function DateOfBirth() {
  const { t, i18n } = useTranslation('completionForm');
  const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
  const [birthDate, setBirthDate] = useState<Date | null>(null);

  const Adapter = useMemo(() => {
    return isFarsi ? AdapterDateFnsJalali : AdapterDateFns;
  }, [isFarsi]);

  return (
    <LocalizationProvider dateAdapter={Adapter}>
      <DatePicker
        label={t('completion.dateOfBirth')}
        value={birthDate}
        onChange={(newValue) => setBirthDate(newValue)}
        slotProps={{
          textField: {
            fullWidth: true,
            sx: {
              flex: '1 1 260px',
              maxWidth: '309px',
              width: '100%',
            },
          },
        }}
      />
    </LocalizationProvider>
  );
}