import { useState } from 'react';

import { IconInfoCircle } from '@material-hu/icons/tabler';

import Dropdown from '@material-hu/components/design-system/Dropdown';
import List from '@material-hu/components/design-system/List';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import useTheme from '@material-hu/mui/styles/useTheme';

import { BaseSegmentId, SegmentFilter } from '../../../../../../types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type SegmentSelectProps = {
  disabled?: boolean;
  loading?: boolean;
  onChange: (segment: SegmentFilter) => void;
  options: SegmentFilter[];
  value: SegmentFilter | undefined;
};

const SegmentSelect = ({
  disabled,
  loading,
  value,
  options,
  onChange,
}: SegmentSelectProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const theme = useTheme();
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleSelectOption = (option: SegmentFilter) => () => {
    onChange(option);
    handleClose();
  };

  const getTooltipText = () => {
    if (value?.id === BaseSegmentId.BOSS) {
      return t('score_excludes_boss_with_boss_filter');
    }

    if (value?.id === BaseSegmentId.TEAM) {
      return t('score_excludes_boss_with_team_filter');
    }

    return undefined;
  };

  const tooltipText = getTooltipText();

  return (
    <Stack
      sx={{
        alignItems: 'center',
        gap: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
        <Dropdown
          label={value?.title ?? '--'}
          open={open}
          onOpen={handleOpen}
          onClose={handleClose}
          buttonProps={{
            disabled: disabled || !options.length || loading,
          }}
        >
          <List sx={{ maxHeight: '360px' }}>
            {options.map(option => (
              <ListItem
                key={option.id}
                selected={value?.id === option.id}
                onClick={handleSelectOption(option)}
                text={{
                  title: option.title,
                }}
              />
            ))}
          </List>
        </Dropdown>
        {tooltipText && (
          <Tooltip description={tooltipText}>
            <Box
              component="span"
              tabIndex={0}
              role="img"
              aria-label={tooltipText}
              sx={{
                display: 'inline-flex',
                alignItems: 'center',
                cursor: 'default',
              }}
            >
              <IconInfoCircle
                size={20}
                color={theme.palette.new.text.neutral.lighter}
              />
            </Box>
          </Tooltip>
        )}
      </Stack>
    </Stack>
  );
};

export default SegmentSelect;
