import Typography from '@material-hu/mui/Typography';

import Checkbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import FormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import MenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import { SegmentationType } from 'src/types/user';

import { SegmentationAutocompleteProps } from './types';

function SegmentationAutocomplete({
  name,
  rules,
  autocompleteProps,
}: SegmentationAutocompleteProps) {
  const segmentationsQuery = useSegmentationGroups<any>(
    {
      select: response =>
        (response.data as SegmentationType[])?.map(segmentation => ({
          value: segmentation.id,
          label: segmentation.name,
        })),
    },
    false,
    true,
  );

  const options = segmentationsQuery.data || [];

  return (
    <FormAutocomplete
      name={name}
      rules={rules}
      options={options}
      autocompleteProps={{
        loading: segmentationsQuery.isLoading,
        isServerFiltered: false,
        multiple: true,
        sx: {
          marginTop: 2,
          backgroundColor: theme => theme.palette.common.white,
        },
        renderOption: (props, option, optionState) => {
          const { key, ...rest } = props;

          return (
            <MenuItem
              selected={optionState.selected}
              sx={{ gap: 1, padding: 2 }}
              key={key}
              {...rest}
            >
              <Checkbox checked={optionState.selected} />
              <Typography
                variant="globalS"
                sx={{ py: 1 }}
              >
                {option.label}
              </Typography>
            </MenuItem>
          );
        },
        ...autocompleteProps,
      }}
    />
  );
}

export default SegmentationAutocomplete;