Account/src/features/profile/components/PersonalInformation.tsx

import {
  Box,
  Typography,
  Button,
  TextField,
  FormControl,
  Select,
  MenuItem,
  type SelectChangeEvent,
} from '@mui/material';
import { useState, type ChangeEvent } from 'react';
import { CardContainer } from '@/components/CardContainer';
import { CountryFlag } from '@/components/CountryFlag';
import { useTranslation } from 'react-i18next';
import { Profile } from 'iconsax-react';

export function PersonalInformation() {
  const { t } = useTranslation('profileSetting');
  const [isEditing, setIsEditing] = useState(false);
  const [gender, setGender] = useState('');
  const initialData = {
    firstName: 'محمد حسین',
    lastName: 'برزه‌گر',
    country: 'قطر',
    gender: 'مرد',
    nationalCode: '',
  };
  const [data, setData] = useState(initialData);
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const toggleEdit = () => {
    setIsEditing((prev) => !prev);
    if (isEditing) {
      setData((prev) => ({
        ...prev,
        gender: gender === 'male' ? 'مرد' : gender === 'female' ? 'زن' : '',
      }));
    } else {
      setGender(
        data.gender === 'مرد' ? 'male' : data.gender === 'زن' ? 'female' : '',
      );
    }
  };

  const handleChangeGender = (e: SelectChangeEvent) => {
    setGender(e.target.value);
  };

  const displayValue = (value: string | null | undefined) => {
    return value && value.trim() !== '' ? value : 'تعیین نشده';
  };

  return (
    <Box
      sx={{
        display: 'flex',
        backgroundColor: '#F5F5F5',
        justifyContent: 'center',
        alignItems: 'center',
        p: 2,
        overflow: 'hidden',
      }}
    >
      <CardContainer
        title={t('settingForm.titlePersonalInfo')}
        subtitle={t('settingForm.descriptionPersonalInfo')}
        highlighted={isEditing}
        action={
          <Box sx={{ display: 'flex', gap: 1 }}>
            {isEditing && (
              <Button
                variant="text"
                onClick={() => setIsEditing(false)}
                size="large"
                sx={{
                  color: '#2979FF',
                  width: '43px',
                }}
              >
                {t('settingForm.rejectButton')}
              </Button>
            )}
            <Button
              onClick={toggleEdit}
              size="large"
              sx={{
                border: '1px solid',
                borderColor: '#2979FF',
                borderRadius: '4px',
                backgroundColor: isEditing ? '#2979FF' : 'white',
                color: isEditing ? 'white' : '#2979FF',
                px: '22px',
                py: '8px',
                width: isEditing ? '85px' : '93px',
              }}
            >
              {isEditing
                ? t('settingForm.saveButton')
                : t('settingForm.editButton')}
            </Button>
          </Box>
        }
      >
        <Box
          sx={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 4,
            p: 2,
          }}
        >
          <Box sx={{ width: 'calc(50% - 16px)' }}>
            {isEditing ? (
              <TextField
                fullWidth
                name="firstName"
                value={data.firstName}
                onChange={handleChange}
                label={t('settingForm.name')}
              />
            ) : (
              <Box
                sx={{
                  height: 'auto',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'flex-start',
                  gap: 0.5,
                  px: 4,
                }}
              >
                <Typography variant="caption" color="text.secondary">
                  {`${t('settingForm.name')} و ${t('settingForm.familyName')}`}
                </Typography>

                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                  <Profile size="20" color="gray" />
                  <Typography variant="body1" color="text.primary">
                    {displayValue(data.firstName + ' ' + data.lastName)}
                  </Typography>
                </Box>
              </Box>
            )}
          </Box>

          <Box sx={{ width: 'calc(50% - 16px)' }}>
            {isEditing ? (
              <TextField
                fullWidth
                name="lastName"
                value={data.lastName}
                onChange={handleChange}
                label={t('settingForm.familyName')}
              />
            ) : (
              <Box
                sx={{
                  height: '48px',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                }}
              >
                <Typography variant="caption" color="text.secondary">
                  {t('settingForm.country')}
                </Typography>
                <CountryFlag country={data.country} />
              </Box>
            )}
          </Box>

          <Box sx={{ width: 'calc(50% - 16px)' }}>
            {isEditing ? (
              <FormControl fullWidth>
                <Select
                  value={gender}
                  onChange={handleChangeGender}
                  displayEmpty
                  renderValue={(selected) => {
                    if (!selected) {
                      return (
                        <span style={{ color: '#aaa' }}>
                          {t('settingForm.genderPlaceholder')}
                        </span>
                      );
                    }
                    return selected === 'male'
                      ? t('settingForm.man')
                      : t('settingForm.woman');
                  }}
                >
                  <MenuItem value="male">{t('settingForm.man')}</MenuItem>
                  <MenuItem value="female">{t('settingForm.woman')}</MenuItem>
                </Select>
              </FormControl>
            ) : (
              <Box
                sx={{
                  height: '48px',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  px: 4,
                }}
              >
                <Typography variant="caption" color="text.secondary">
                  {t('settingForm.gender')}
                </Typography>
                <Typography variant="body1" color="text.primary">
                  {displayValue(data.gender)}
                </Typography>
              </Box>
            )}
          </Box>

          <Box sx={{ width: 'calc(50% - 16px)' }}>
            {isEditing ? (
              <TextField
                fullWidth
                name="nationalCode"
                value={data.nationalCode}
                onChange={handleChange}
                label={t('settingForm.nationalCode')}
              />
            ) : (
              <Box
                sx={{
                  height: '48px',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                }}
              >
                <Typography variant="caption" color="text.secondary">
                  {t('settingForm.nationalCode')}{' '}
                </Typography>
                <Typography variant="body1" color="text.primary">
                  {displayValue(data.nationalCode)}
                </Typography>
              </Box>
            )}
          </Box>
        </Box>
      </CardContainer>
    </Box>
  );
}