import { FC } from 'react';

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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { CriteriaType } from 'src/types/audience';
import { SegmentationType } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getSegmentationsName } from 'src/utils/segmentationUtils';

import { useCriteria } from 'src/components/Audience/criteriaContext';

import CriteriaMenu from './CriteriaMenu';
import {
  QueryKeys,
  SegmentationCriteriaService,
} from './hooks/useSegmentationCriteria';

type Props = {
  customGetIndividualCriteriaUsers?: SegmentationCriteriaService['customGetIndividualCriteriaUsers'];
  customKeyIndividualCriteriaUsers?: QueryKeys['customKeyIndividualCriteriaUsers'];
  excludeDeactivatedUsersFromCollaboratorQueries?: boolean;
};

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

const CriteriaList: FC<Props> = props => {
  const {
    customGetIndividualCriteriaUsers,
    customKeyIndividualCriteriaUsers,
    excludeDeactivatedUsersFromCollaboratorQueries = false,
  } = props;
  const { criteriaSelected } = useCriteria();
  const { t } = useLokaliseTranslation('audience');
  const HuGoThemeProvider = useHuGoTheme();

  const { data: segmentations = [] } = useSegmentationGroups({
    enabled: criteriaSelected.some(
      elem => elem.type === CriteriaType.SEGMENTED_USERS,
    ),
    select: r => (r.data as SegmentationType[]).flatMap(g => g.items),
    staleTime: Infinity,
  });

  return (
    <HuGoThemeProvider>
      <Stack sx={{ width: '100%', gap: 2 }}>
        {criteriaSelected.map(elem => (
          <HuCardContainer
            key={elem.id}
            sx={{
              width: '100%',
            }}
          >
            <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
              <HuListItem
                sx={{ width: '100%', '.MuiListItem-root': { p: 0 } }}
                text={{
                  title: t(`${elem.type}_title`),
                  description: t('reached_criteria_count', {
                    count: elem.usersCount,
                  }),
                  copetin:
                    elem.type === CriteriaType.SEGMENTED_USERS
                      ? getSegmentationsName(elem, segmentations)
                      : undefined,
                }}
                avatar={{
                  Icon: AVATAR_MAP[elem.type],
                }}
              />
              <CriteriaMenu
                criteria={elem}
                customGetIndividualCriteriaUsers={
                  customGetIndividualCriteriaUsers
                }
                customKeyIndividualCriteriaUsers={
                  customKeyIndividualCriteriaUsers
                }
                excludeDeactivatedUsersFromCollaboratorQueries={
                  excludeDeactivatedUsersFromCollaboratorQueries
                }
              />
            </Stack>
          </HuCardContainer>
        ))}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default CriteriaList;