import {
  Box,
  TextField,
  Autocomplete,
  FormLabel,
  Paper,
  Stack,
  Button,
} from '@mui/material';
import { styled } from '@mui/material';

const AutocompleteStyled = styled(Autocomplete)`
  & .MuiOutlinedInput-root {
    background-color: white;
    height: 2.56rem;
    padding: 0;
    width: 250px;

    & input {
      padding: 0.5rem 0.75rem;
      height: 1.5rem;
    }

    & fieldset {
      border-radius: 0.63rem;
    }
    & .MuiOutlinedInput-notchedOutline {
      border-radius: 0.63rem;
      border: 0.53px solid #d1d5db;
    }
  }
`;

const DictVspFilters = ({ ssps, selectedSsp = null, onSspChange }) => {
  return (
    <Paper
      sx={{
        p: '1.5rem',
        borderRadius: '.63rem',
        border: '0.53px solid #e5e7eb',
        backgroundColor: '#F9FAFB',
        boxShadow: 'none',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
        mb: '1.5rem',
      }}
    >
      <Stack direction={'row'} spacing={'1rem'}>
        <Box width="30rem">
          <AutocompleteStyled
            size="small"
            options={ssps || []}
            noOptionsText="Не найдено"
            getOptionLabel={(option) => option.title || option.name || ''}
            value={selectedSsp}
            getOptionKey={(option) => option.id || option.name || option.title}
            onChange={(event, newValue) => onSspChange(newValue)}
            renderInput={(params) => (
              <TextField {...params} placeholder="Все ССП" />
            )}
          />
        </Box>
      </Stack>
    </Paper>
  );
};

export default DictVspFilters;
