import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme } from "@mui/material";
import { InfoPopover } from '@ui_kit/InfoPopover';
import CheckboxIcon from "@icons/Checkbox";

interface GenderAndAgeSelectorProps {
  gender: string;
  setGender: (gender: string) => void;
}

export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAgeSelectorProps) {
  const theme = useTheme();
  return (
    <Box sx={{ display: 'flex', gap: 4 }}>



      <FormControl component="fieldset" variant="standard">
        <Box sx={{ display: 'flex', alignItems: "center", gap: '4px' }}>
          <FormLabel
            sx={{
              '&.Mui-focused': {
                color: '#4D4D4D',
              },
              color: '#4D4D4D',
              fontSize: '18px',
              fontWeight: 500,
              lineHeight: 1,
              letterSpacing: 0,
              mr: '3px',
            }}

            component="legend" >Пол</FormLabel>
          <InfoPopover />
        </Box>
        <RadioGroup
          sx={{
            width: "155px",
            justifyContent: "space-between",
            mt: "9px",
            ml: "-9px"
          }}
          row aria-label="gender" name="row-radio-buttons-group" value={gender} onChange={(e) => setGender(e.target.value)}>

          <FormControlLabel

            sx={{
              // 1. Уменьшаем общий размер блока
              padding: 0,

              // 2. Но сохраняем пространство для Ripple
              '& .MuiTouchRipple-root': {
                width: '100%',
                height: '100%',
                overflow: 'visible',
              },

              // 3. Позиционируем иконку абсолютно
              '& .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,
            }}

            value="male" control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />} label="М" />
          <FormControlLabel

            sx={{
              // 1. Уменьшаем общий размер блока
              padding: 0,

              // 2. Но сохраняем пространство для Ripple
              '& .MuiTouchRipple-root': {
                width: '100%',
                height: '100%',
                overflow: 'visible',
              },

              // 3. Позиционируем иконку абсолютно
              '& .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,
            }}

            value="female" control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />} label="Ж" />
        </RadioGroup>
      </FormControl>



      <FormControl sx={{ minWidth: "420px", marginLeft: "15px" }} variant="filled">
        <Box sx={{

          display: 'flex', alignItems: 'center', gap: '4px'
        }}>
          <FormLabel sx={{
            color: '#4D4D4D',
            fontSize: "18px",
            fontWeight: 500,
            lineHeight: "100%",
            '&.Mui-focused': {
              color: '#4D4D4D',
            },
          }}>Возраст</FormLabel>
          <InfoPopover />
        </Box>
        <Select
          value="35-50"
          displayEmpty
          inputProps={{ 'aria-label': 'age', disableUnderline: true }}
          disableUnderline
          sx={{
            height: "48px",
            maxWidth: "420px",
            borderRadius: "8px",
            border: "1px solid #9A9AAF",
            '& .MuiSelect-filled': {
              height: "100%",
              width: "100%",

            },
            '& .MuiSelect-select': {
              height: "100%",
              width: "100%",
              p: "10px 20px"
            },
            '& .MuiOutlinedInput-notchedOutline': {
              borderColor: '#E0E0E0',
            },
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: '#B0B0B0',
            },
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: '#7E2AEA',
            },
            mt: "17px",
          }}
        >

          <MenuItem value="">Выберите возраст</MenuItem>
          <MenuItem value="35-50">35-50</MenuItem>

        </Select>
      </FormControl>
    </Box>
  );
}