import { FC, ReactNode } from 'react';

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

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import { Criteria, CriteriaType } from 'src/types/audience';
import { CriteriaToSelect as CriteriaToSelectType } from 'src/types/vacations';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import AddCriteriaMenu from './AddCriteriaMenu';
import CriteriaList from './CriteriaList';
import CriteriaToSelect from './CriteriaToSelect';
import { useAllCriteriaDrawerContent } from './hooks/useAllCriteriaDrawerContent';
import { useIndividualDrawerContent } from './hooks/useIndividualDrawerContent';
import {
  QueryKeys,
  SegmentationCriteriaService,
} from './hooks/useSegmentationCriteria';
import { useSegmentationCriteriaDrawerContent } from './hooks/useSegmentationCriteriaDrawerContent';

type Props = {
  isLoadingTemplate: boolean;
  hasCriteria: boolean;
  criteriasSelected: Criteria[];
  behaviourSettings: {
    allowsMultipleSegmentedCriteria: boolean;
    skipAllCollaboratorsDrawer: boolean;
  };
  showAllUsersConfirmationModal: () => void;
  service?: SegmentationCriteriaService;
  queryKeys?: QueryKeys;
  saveErrorComponent?: ReactNode;
  excludeDeactivatedUsersFromCollaboratorQueries?: boolean;
};

export const CriteriasContainer: FC<Props> = props => {
  const {
    isLoadingTemplate,
    hasCriteria,
    service,
    queryKeys,
    saveErrorComponent,
    criteriasSelected,
    showAllUsersConfirmationModal,
    behaviourSettings: {
      allowsMultipleSegmentedCriteria,
      skipAllCollaboratorsDrawer,
    },
    excludeDeactivatedUsersFromCollaboratorQueries = false,
  } = props;
  const { t } = useLokaliseTranslation('audience');

  const criteriaCanBeAdded = !criteriasSelected.some(
    cr => cr.type === CriteriaType.ALL_USERS,
  );

  const allDrawer = useDrawerV2(useAllCriteriaDrawerContent);

  const individualDrawer = useDrawerV2(args =>
    useIndividualDrawerContent({
      ...args,
      customGetIndividualCriteriaUsers:
        service?.customGetIndividualCriteriaUsers,
      customKeyIndividualCriteriaUsers:
        queryKeys?.customKeyIndividualCriteriaUsers,
      excludeDeactivatedUsersFromCollaboratorQueries,
    }),
  );

  const segmentedDrawer = useDrawerV2(args =>
    useSegmentationCriteriaDrawerContent({
      ...args,
      excludeDeactivatedUsersFromCollaboratorQueries,
    }),
  );

  const criterias: CriteriaToSelectType[] = [
    ...insertIf(
      allowsMultipleSegmentedCriteria ||
        !criteriasSelected.some(c => c.type === CriteriaType.SEGMENTED_USERS),
      {
        type: CriteriaType.SEGMENTED_USERS,
        title: t('segmented_users_title'),
        subtitle: t('segmented_users_subtitle'),
        pillTitle: t('automatic_assignment'),
        avatar: IconUsersGroup,
        onClick: () => segmentedDrawer.showDrawer({}),
      },
    ),
    ...insertIf(
      !criteriasSelected.some(c => c.type === CriteriaType.INDIVIDUAL_USERS),
      {
        type: CriteriaType.INDIVIDUAL_USERS,
        title: t('individual_users_title'),
        subtitle: t('individual_users_subtitle'),
        avatar: IconUsers,
        onClick: () => individualDrawer.showDrawer({}),
      },
    ),
    {
      type: CriteriaType.ALL_USERS,
      title: t('all_users_title'),
      subtitle: t('all_users_subtitle'),
      pillTitle: t('automatic_assignment'),
      avatar: IconBuildingSkyscraper,
      onClick: () =>
        skipAllCollaboratorsDrawer
          ? showAllUsersConfirmationModal()
          : allDrawer.showDrawer({}),
    },
  ];

  return (
    <Stack sx={{ mt: 3, width: '100%' }}>
      {allDrawer.drawer}
      {individualDrawer.drawer}
      {segmentedDrawer.drawer}
      {isLoadingTemplate && <HuCircularProgress centered />}
      {!hasCriteria && !isLoadingTemplate && (
        <CriteriaToSelect criterias={criterias} />
      )}
      {hasCriteria && !isLoadingTemplate && (
        <Stack sx={{ width: '100%' }}>
          <CriteriaList
            customGetIndividualCriteriaUsers={
              service?.customGetIndividualCriteriaUsers
            }
            customKeyIndividualCriteriaUsers={
              queryKeys?.customKeyIndividualCriteriaUsers
            }
            excludeDeactivatedUsersFromCollaboratorQueries={
              excludeDeactivatedUsersFromCollaboratorQueries
            }
          />
          {criteriaCanBeAdded && (
            <AddCriteriaMenu criteriaToSelect={criterias} />
          )}
          {saveErrorComponent}
        </Stack>
      )}
    </Stack>
  );
};

export default CriteriasContainer;