import { Box, Typography, Avatar } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { DisplayField } from './DisplayField';
import { Gender } from '@/features/profile/types/settingsType';
import { type InfoRowDisplayProps } from '@/features/profile/types/settingsType';
import ReactCountryFlag from 'react-country-flag';
import { countries } from '@/data/countries';

export function InfoRowDisplay({
  data,
  uploadedImageUrl,
  initials,
}: InfoRowDisplayProps) {
  const { t } = useTranslation(['setting', 'country']);
  const displayValue = (value: string) =>
    value?.trim() || t('settingForm.notDetermined');
  const countryLabel =
    data.country &&
    t(countries.find((c) => c.code === data.country)?.label || '', {
      ns: 'country',
    });

  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.fullName')}
            </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, display: 'flex', alignItems: 'center', gap: 1 }}
            >
              {data.country ? (
                <>
                  <ReactCountryFlag
                    countryCode={data.country}
                    svg
                    style={{ height: '1.5rem', width: '1.5rem' }}
                  />
                  <Typography variant="body1" color="text.primary">
                    {countryLabel}
                  </Typography>
                </>
              ) : (
                <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>
  );
}
