import { useState } from 'react';

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

import HuAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete';

import { useLokaliseTranslation } from 'src/utils/i18n';

import SelectionCriteriaCard from 'src/components/Audience/components/SelectionCriteriaCard';

import { criteriaSelectionOptions } from './constants';
import {
  CriteriaSelectionDropdownProps,
  CustomAutocompleteOption,
} from './types';

const CriteriaSelectionDropdown = ({
  placeholder,
  label,
  hasIndividualAssignment,
  hasSegmentationAssignment,
  hasAllAssignment,
  showIndividualSelectionDrawer,
  showSegmentationSelectionDrawer,
  showAllSelectionDrawer,
  disabled,
  sx,
}: CriteriaSelectionDropdownProps) => {
  const { t } = useLokaliseTranslation('audience');
  const [value, setValue] = useState<CustomAutocompleteOption | null>(null);

  return (
    <Stack sx={sx}>
      <HuAutocomplete<CustomAutocompleteOption>
        value={value}
        onChange={setValue}
        disabled={disabled}
        placeholder={placeholder || t('add_criteria')}
        label={label || t('add_new_criteria_title')}
        options={criteriaSelectionOptions({
          t,
          showIndividualOption:
            !hasIndividualAssignment && !!showIndividualSelectionDrawer,
          showSegmentationOption:
            !hasSegmentationAssignment && !!showSegmentationSelectionDrawer,
          showAllOption: !hasAllAssignment && !!showAllSelectionDrawer,
          onClickIndividualOption: () => showIndividualSelectionDrawer?.(),
          onClickSegmentationOption: () => showSegmentationSelectionDrawer?.(),
          onClickAllOption: () => showAllSelectionDrawer?.(),
        })}
        renderOption={(_option, option: CustomAutocompleteOption) => {
          return (
            <SelectionCriteriaCard
              title={option.title}
              label={option.label}
              description={option.description}
              Icon={option.icon}
              showArrow={false}
              sx={{
                border: 'none',
                borderRadius: '0',
              }}
              onClick={option.onClick}
            />
          );
        }}
      />
    </Stack>
  );
};

export default CriteriaSelectionDropdown;