frontPanel/src/pages/PersonalizationAI/AgeInputWithSelect.tsx

import React, { useState, useRef } from 'react';
import {
  Box,
  InputBase,
  IconButton,
  Menu,
  MenuItem,
  Paper,
  Popper,
  Grow,
  ClickAwayListener,
  MenuList,
  useTheme
} from '@mui/material';
import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";

interface AgeInputWithSelectProps {
  value: string;
  onChange: (value: string) => void;
}

const AgeInputWithSelect = ({ value, onChange }: AgeInputWithSelectProps) => {
  const theme = useTheme();
  const [open, setOpen] = useState(false);
  const anchorRef = useRef<HTMLDivElement>(null);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  };

  const handleSelectItemClick = (selectedValue: string) => {
    onChange(selectedValue);
    setOpen(false);
  };

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event: Event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
      return;
    }
    setOpen(false);
  };

  return (
    <Box 
      ref={anchorRef}
      sx={{ 
        position: 'relative',
        mt: "17px",
        height: "48px",
        maxWidth: "420px",
        width: "100%",
        borderRadius: "8px",
        border: "1px solid #9A9AAF",
        '&:hover': {
          borderColor: '#B0B0B0',
        },
        '&:focus-within': {
          borderColor: '#7E2AEA',
        }
      }}
    >
      <InputBase
        value={value}
        onChange={handleInputChange}
        fullWidth
        placeholder="Введите возраст"
        sx={{ 
          height: "100%",
          padding: "10px 20px",
          '& input': {
            height: "100%",
            width: "100%",
          }
        }}
      />
      <IconButton
        onClick={handleToggle}
        sx={{ 
          position: 'absolute',
          right: 0,
          top: '50%',
          transform: `translateY(-50%) rotate(${open ? 180 : 0}deg)`,
          cursor: 'pointer',
          color: theme.palette.brightPurple.main,
          display: 'flex',
          alignItems: 'center',
          transition: 'transform 0.2s',
          padding: '8px'
        }}
      >
        <ArrowDownIcon style={{ width: "18px", height: "18px" }} />
      </IconButton>

      <Popper
        open={open}
        anchorEl={anchorRef.current}
        role={undefined}
        placement="bottom-end"
        transition
        disablePortal
        sx={{ zIndex: 1300 }}
      >
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
            }}
          >
            <Paper elevation={8}>
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList autoFocusItem={open} id="menu-list-grow">
                  <MenuItem onClick={() => handleSelectItemClick('')}>Выберите возраст</MenuItem>
                  <MenuItem onClick={() => handleSelectItemClick('18-24')}>18-24</MenuItem>
                  <MenuItem onClick={() => handleSelectItemClick('25-34')}>25-34</MenuItem>
                  <MenuItem onClick={() => handleSelectItemClick('35-44')}>35-44</MenuItem>
                  <MenuItem onClick={() => handleSelectItemClick('45-54')}>45-54</MenuItem>
                  <MenuItem onClick={() => handleSelectItemClick('55+')}>55+</MenuItem>
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </Box>
  );
};

export default AgeInputWithSelect;