import { Box, Typography, Avatar } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { DisplayField } from './DisplayField';
import { CountryFlag } from '@/components/CountryFlag';
import { Gender } from '@/features/profile/types';

interface InfoRowData {
  firstName: string;
  lastName: string;
  country: string;
  gender: Gender | '';
  nationalCode: string;
}

interface InfoRowDisplayProps {
  data: InfoRowData;
  uploadedImageUrl: string | null;
  initials: string;
}

export function InfoRowDisplay({
  data,
  uploadedImageUrl,
  initials,
}: InfoRowDisplayProps) {
  const { t } = useTranslation('setting');
  const displayValue = (value: string) =>
    value?.trim() || t('settingForm.notDetermined');

  const getGenderLabel = (gender: Gender | '') => {
    switch (gender) {
      case Gender.Male:
        return t('settingForm.man');
      case Gender.Female:
        return t('settingForm.woman');
      default:
        return t('settingForm.notDetermined');
    }
  };

  return (
    <Box sx={{ mb: 2 }}>
      <Box sx={{ width: '100%' }}>
        <Box
          sx={{
            display: 'flex',
            flexDirection: { xs: 'column', sm: 'row' },
            gap: 2,
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              flex: 1,
              gap: 1,
            }}
          >
            <Typography variant="caption" color="text.secondary">
              {t('settingForm.name')} و {t('settingForm.familyName')}
            </Typography>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
              <Avatar
                src={uploadedImageUrl || undefined}
                sx={{
                  width: 32,
                  height: 32,
                  bgcolor: 'secondary.main',
                  fontSize: '16px',
                }}
              >
                {initials}
              </Avatar>
              <Typography variant="body1" color="text.primary">
                {`${displayValue(data.firstName)} ${displayValue(
                  data.lastName,
                )}`}
              </Typography>
            </Box>
          </Box>

          <Box sx={{ flex: 1 }}>
            <Typography variant="caption" color="text.secondary">
              {t('settingForm.country')}
            </Typography>
            <Box sx={{ mt: 0.5 }}>
              {data.country ? (
                <CountryFlag code={data.country} />
              ) : (
                <Typography variant="body1" color="text.primary">
                  {t('settingForm.notDetermined')}
                </Typography>
              )}
            </Box>
          </Box>
        </Box>
      </Box>

      <Box
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', sm: 'row' },
          gap: 2,
          mt: 2,
        }}
      >
        <DisplayField
          label={t('settingForm.gender')}
          value={getGenderLabel(data.gender)}
        />
        <DisplayField
          label={t('settingForm.nationalCode')}
          value={displayValue(data.nationalCode)}
        />
      </Box>
    </Box>
  );
}