frontPanel/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx

import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, Button, useMediaQuery } from "@mui/material";
import CheckboxIcon from "@icons/Checkbox";
import AgeInputWithSelect from "./AgeInputWithSelect";
import { useState, useEffect } from "react";

interface GenderAndAgeSelectorProps {
  gender: string;
  age: string;
  ageError: boolean;
  onGenderChange: (gender: string) => void;
  onAgeChange: (age: string) => void;
  onAgeErrorChange: (error: boolean) => void;
  onStartCreate: () => void;
}

export default function GenderAndAgeSelector({ 
  gender, 
  age, 
  ageError,
  onGenderChange,
  onAgeChange,
  onAgeErrorChange,
  onStartCreate 
}: GenderAndAgeSelectorProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(845));
  const [maleChecked, setMaleChecked] = useState(false);
  const [femaleChecked, setFemaleChecked] = useState(false);

  // Синхронизируем состояние чекбоксов с пропсом gender
  useEffect(() => {
    if (gender === '1') {
      setMaleChecked(true);
      setFemaleChecked(false);
    } else if (gender === '0') {
      setMaleChecked(false);
      setFemaleChecked(true);
    } else if (gender === '2') {
      setMaleChecked(true);
      setFemaleChecked(true);
    } else {
      setMaleChecked(false);
      setFemaleChecked(false);
    }
  }, [gender]);

  const handleGenderChange = (type: 'male' | 'female', checked: boolean) => {
    if (type === 'male') {
      setMaleChecked(checked);
    } else {
      setFemaleChecked(checked);
    }

    // Обновляем значение gender в родительском компоненте
    if (type === 'male' && checked && !femaleChecked) {
      onGenderChange('1'); // Только мужской
    } else if (type === 'female' && checked && !maleChecked) {
      onGenderChange('0'); // Только женский
    } else if (type === 'male' && checked && femaleChecked) {
      onGenderChange('2'); // Оба пола
    } else if (type === 'female' && checked && maleChecked) {
      onGenderChange('2'); // Оба пола
    } else if (type === 'male' && !checked && femaleChecked) {
      onGenderChange('0'); // Только женский
    } else if (type === 'female' && !checked && maleChecked) {
      onGenderChange('1'); // Только мужской
    } else {
      onGenderChange(''); // Ничего не выбрано
    }
  };

  return (
    <Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
      <Box sx={{ display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial" }}>
        <FormControl component="fieldset" variant="standard">
          <Box sx={{ display: 'flex', alignItems: "end", gap: '4px' }}>
            <FormLabel
              sx={{
                '&.Mui-focused': {
                  color: '#4D4D4D',
                },
                color: '#4D4D4D',
                fontSize: '18px',
                fontWeight: 500,
                lineHeight: 1,
                letterSpacing: 0,
                mr: '3px',
              }}
              component="legend">Пол</FormLabel>
          </Box>
          <Box
            sx={{
              width: "155px",
              justifyContent: "space-between",
              mt: "20px",
              ml: "-9px",
              display: 'flex',
              gap: '10px'
            }}
          >
            <FormControlLabel
              sx={{
                padding: 0,
                '& .MuiTouchRipple-root': {
                  width: '100%',
                  height: '100%',
                  overflow: 'visible',
                },
                '& .MuiSvgIcon-root': {
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translate(-50%, -50%)',
                },
                '& .MuiFormControlLabel-label': {
                  fontSize: '18px',
                  fontWeight: 400,
                  fontFamily: 'Rubik',
                  lineHeight: 1,
                  letterSpacing: 0,
                  color: '#4D4D4D',
                  ml: "6px"
                },
                m: 0,
              }}
              control={
                <Checkbox 
                  icon={<CheckboxIcon />} 
                  checkedIcon={<CheckboxIcon checked />}
                  checked={maleChecked}
                  onChange={(e) => handleGenderChange('male', e.target.checked)}
                />
              }
              label="М"
            />
            <FormControlLabel
              sx={{
                padding: 0,
                '& .MuiTouchRipple-root': {
                  width: '100%',
                  height: '100%',
                  overflow: 'visible',
                },
                '& .MuiSvgIcon-root': {
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translate(-50%, -50%)',
                },
                '& .MuiFormControlLabel-label': {
                  fontSize: '18px',
                  fontWeight: 400,
                  fontFamily: 'Rubik',
                  lineHeight: 1,
                  letterSpacing: 0,
                  color: '#4D4D4D',
                },
                m: 0,
              }}
              control={
                <Checkbox 
                  icon={<CheckboxIcon />} 
                  checkedIcon={<CheckboxIcon checked />}
                  checked={femaleChecked}
                  onChange={(e) => handleGenderChange('female', e.target.checked)}
                />
              }
              label="Ж"
            />
          </Box>
        </FormControl>

        <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px", minWidth: "265px" }} variant="filled">
          <Box sx={{
            display: 'flex',
            alignItems: 'end',
            gap: '4px'
          }}>
            <FormLabel sx={{
              color: '#4D4D4D',
              fontSize: "18px",
              fontWeight: 500,
              lineHeight: "100%",
              '&.Mui-focused': {
                color: '#4D4D4D',
              },
            }}>Возраст</FormLabel>
          </Box>
          <AgeInputWithSelect value={age} onChange={onAgeChange} onErrorChange={onAgeErrorChange} />
        </FormControl>
      </Box>

      <Button
        onClick={onStartCreate}
        variant="contained"
        disabled={!gender || !age || ageError}
        sx={{
          bgcolor: theme.palette.brightPurple.main,
          borderRadius: "8px",
          width: "130px",
          height: "48px",
          boxShadow: "none",
          textTransform: "none",
          fontSize: "18px",
          '&:hover': { bgcolor: theme.palette.brightPurple.main },
        }}
      >
        Ок
      </Button>
    </Box>
  );
}