import { FC, useState } from 'react';

import {
  IconBuildingSkyscraper,
  IconUsers,
  IconUsersGroup,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuInputSelect from '@material-hu/components/design-system/Inputs/Select';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { CriteriaType } from 'src/types/audience';
import { CriteriaToSelect } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

type AddCriteriaMenuProps = {
  criteriaToSelect: CriteriaToSelect[];
};

const AVATAR_MAP = {
  [CriteriaType.SEGMENTED_USERS]: IconUsersGroup,
  [CriteriaType.INDIVIDUAL_USERS]: IconUsers,
  [CriteriaType.ALL_USERS]: IconBuildingSkyscraper,
};

type CriteriaToSelectOption = CriteriaToSelect & {
  label: string;
  value: string;
  criteriaType: CriteriaType;
};

const AddCriteriaMenu: FC<AddCriteriaMenuProps> = props => {
  const { criteriaToSelect } = props;
  const [selectedCriteria, setSelectedCriteria] =
    useState<CriteriaToSelectOption | null>(null);

  const { t } = useLokaliseTranslation('audience');

  const criteriaToSelectOptions = criteriaToSelect.map(elem => ({
    label: elem.title,
    value: elem.type,
    ...elem,
  })) as CriteriaToSelectOption[];

  return (
    <HuInputSelect
      fullWidth
      value={selectedCriteria?.value || ''}
      options={criteriaToSelectOptions}
      placeholder={t('add_criteria')}
      onChange={value => {
        const selected = criteriaToSelectOptions.find(
          opt => opt.value === value,
        );
        setSelectedCriteria(selected || null);
      }}
      sx={{
        mt: 5,
      }}
      renderOption={(option: any) => {
        return (
          <Stack
            sx={{ flex: 1 }}
            onClick={() => {
              option.onClick();
            }}
          >
            <HuListItem
              key={option.title}
              sx={{
                width: '100%',

                '& .MuiListItem-root': {
                  p: 0.5,
                },
                '& .MuiStack-root': {
                  whiteSpace: 'break-spaces',
                  maxWidth: 600,
                },
              }}
              text={{
                description: option.subtitle,
                title: option.label,
              }}
              sidePill={
                option.pillTitle
                  ? {
                      label: option.pillTitle,
                    }
                  : undefined
              }
              avatar={{
                Icon: AVATAR_MAP[option.value as CriteriaType],
              }}
            />
          </Stack>
        );
      }}
    />
  );
};

export default AddCriteriaMenu;