maternal-app/maternal-web/components/children/ChildDialog.tsx

'use client';

import { useState, useEffect } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  MenuItem,
  Box,
  Alert,
} from '@mui/material';
import { Child, CreateChildData } from '@/lib/api/children';
import { useTranslation } from '@/hooks/useTranslation';
import { PhotoUpload } from '@/components/common/PhotoUpload';
import { useErrorMessage } from '@/components/common/ErrorMessage';
import { formatErrorMessage } from '@/lib/utils/errorHandler';

interface ChildDialogProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateChildData) => Promise<void>;
  child?: Child | null;
  isLoading?: boolean;
}

export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false }: ChildDialogProps) {
  const { t } = useTranslation('children');
  const [formData, setFormData] = useState<CreateChildData>({
    name: '',
    birthDate: '',
    gender: 'male',
    photoUrl: '',
    photoAlt: '',
  });
  const { error, showError, clearError, hasError } = useErrorMessage();

  useEffect(() => {
    if (child) {
      setFormData({
        name: child.name,
        birthDate: child.birthDate.split('T')[0], // Convert to YYYY-MM-DD format
        gender: child.gender,
        photoUrl: child.photoUrl || '',
        photoAlt: child.photoAlt || '',
      });
    } else {
      setFormData({
        name: '',
        birthDate: '',
        gender: 'male',
        photoUrl: '',
        photoAlt: '',
      });
    }
    clearError();
  }, [child, open, clearError]);

  const handleChange = (field: keyof CreateChildData) => (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    setFormData({ ...formData, [field]: e.target.value });
  };

  const handleSubmit = async () => {
    clearError();

    // Validation
    if (!formData.name.trim()) {
      showError({ message: t('dialog.validation.nameRequired'), code: 'VALIDATION_NAME_REQUIRED' });
      return;
    }
    if (!formData.birthDate) {
      showError({ message: t('dialog.validation.birthDateRequired'), code: 'VALIDATION_BIRTHDATE_REQUIRED' });
      return;
    }

    // Check if birth date is in the future
    const selectedDate = new Date(formData.birthDate);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    if (selectedDate > today) {
      showError({ message: t('dialog.validation.birthDateFuture'), code: 'VALIDATION_BIRTHDATE_FUTURE' });
      return;
    }

    try {
      await onSubmit(formData);
      onClose();
    } catch (err: any) {
      showError(err);
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      aria-labelledby="child-dialog-title"
      aria-describedby="child-dialog-description"
    >
      <DialogTitle id="child-dialog-title">{child ? t('editChild') : t('addChild')}</DialogTitle>
      <DialogContent>
        <Box
          id="child-dialog-description"
          sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}
        >
          {hasError && (
            <Alert severity="error" onClose={clearError} role="alert">
              {formatErrorMessage(error)}
            </Alert>
          )}

          <TextField
            label={t('dialog.name')}
            value={formData.name}
            onChange={handleChange('name')}
            fullWidth
            required
            autoFocus
            disabled={isLoading}
            inputProps={{
              'aria-required': 'true',
              'aria-invalid': !formData.name.trim() && error ? 'true' : 'false',
            }}
          />

          <TextField
            label={t('dialog.birthDate')}
            type="date"
            value={formData.birthDate}
            onChange={handleChange('birthDate')}
            fullWidth
            required
            InputLabelProps={{
              shrink: true,
            }}
            disabled={isLoading}
            inputProps={{
              'aria-required': 'true',
              'aria-invalid': !formData.birthDate && error ? 'true' : 'false',
            }}
          />

          <TextField
            label={t('dialog.gender')}
            value={formData.gender}
            onChange={handleChange('gender')}
            fullWidth
            required
            select
            disabled={isLoading}
            inputProps={{
              'aria-required': 'true',
            }}
          >
            <MenuItem value="male">{t('gender.male')}</MenuItem>
            <MenuItem value="female">{t('gender.female')}</MenuItem>
            <MenuItem value="other">{t('gender.other')}</MenuItem>
          </TextField>

          <PhotoUpload
            label={t('dialog.photoUrl')}
            value={formData.photoUrl || ''}
            onChange={(url) => setFormData({ ...formData, photoUrl: url })}
            altText={formData.photoAlt || ''}
            onAltTextChange={(altText) => setFormData({ ...formData, photoAlt: altText })}
            disabled={isLoading}
            size={80}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={isLoading}>
          {t('dialog.cancel')}
        </Button>
        <Button onClick={handleSubmit} variant="contained" disabled={isLoading}>
          {isLoading ? t('dialog.saving') : child ? t('dialog.update') : t('dialog.add')}
        </Button>
      </DialogActions>
    </Dialog>
  );
}