import { type FC } from 'react';
import { FormProvider, type UseFormReturn } from 'react-hook-form';

import { pickBy } from 'lodash-es';
import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { IconFilter, IconZoomExclamation } from '@material-hu/icons/tabler';
import Badge from '@material-hu/mui/Badge';
import Stack from '@material-hu/mui/Stack';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
import HuUserAvatar from '@material-hu/components/composed-components/UserAvatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuSearch from '@material-hu/components/design-system/Inputs/Search';

import useDebounceSearchQuery from 'src/hooks/useDebounceSearch';
import { useInfiniteUsersPublicSearch } from 'src/services/usersQueries';
import { type Criteria } from 'src/types/audience';
import { addOrRemove } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { InfiniteList } from 'src/components/InfiniteList';

import { type FormValues } from '../hooks/useIndividualDrawerContent';
import {
  type QueryKeys,
  type SegmentationCriteriaService,
} from '../hooks/useSegmentationCriteria';
import { useSegmentationFiltersDrawerContent } from '../hooks/useSegmentationFiltersDrawerContent';

export type IndividualCriteriaDrawerProps = {
  form: UseFormReturn<FormValues>;
  criteria?: Partial<Criteria>;
  customGetIndividualCriteriaUsers?: SegmentationCriteriaService['customGetIndividualCriteriaUsers'];
  customKeyIndividualCriteriaUsers?: QueryKeys['customKeyIndividualCriteriaUsers'];
  excludeDeactivatedUsersFromCollaboratorQueries?: boolean;
};

const IndividualCriteriaDrawerContent: FC<
  IndividualCriteriaDrawerProps
> = props => {
  const { form, excludeDeactivatedUsersFromCollaboratorQueries = false } =
    props;
  const {
    debouncedQuery,
    onChange: onChangeSearch,
    query: search,
  } = useDebounceSearchQuery({
    debounceTime: 500,
  });

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

  const { watch } = form;
  const { userIds, selectedItems } = watch();

  const segmentationFiltersDrawer = useDrawerV2(args =>
    useSegmentationFiltersDrawerContent({
      ...args,
      defaultSelectedItems: selectedItems,
      onSelect: newSelectedItems =>
        form.setValue('selectedItems', newSelectedItems),
    }),
  );

  const segmentationItemIds = Object.keys(pickBy(selectedItems));
  const allUsers = useInfiniteUsersPublicSearch(
    {
      limit: 50,
      search: debouncedQuery,
      segmentationItemIds,
      ...(excludeDeactivatedUsersFromCollaboratorQueries
        ? { onlyActiveAndUnclaimedPublicUsers: true }
        : {}),
    },
    {
      keepPreviousData: false,
    },
  );

  return (
    <Stack sx={{ pb: 2, height: '100%' }}>
      <Stack sx={{ flexDirection: 'row', gap: 2, mb: 2 }}>
        <HuSearch
          value={search}
          onChange={onChangeSearch}
        />
        <Button
          startIcon={<IconFilter />}
          variant="secondary"
          sx={{ textWrap: 'nowrap', height: 1 }}
          onClick={() => segmentationFiltersDrawer.showDrawer({})}
          endIcon={
            segmentationItemIds.length > 0 && (
              <Badge
                sx={{ pl: 1.5 }}
                badgeContent={segmentationItemIds.length}
                color="primary"
              />
            )
          }
        >
          {t('general:filter')}
        </Button>
      </Stack>

      <FormProvider {...form}>
        <InfiniteList
          isSuccess={!!allUsers.data}
          isLoading={allUsers.isLoading}
          isEmpty={
            allUsers.data?.pages && !allUsers.data?.pages[0]?.data?.count
          }
          fetchNextPage={allUsers.fetchNextPage}
          hasNextPage={allUsers.hasNextPage}
          isFetchingNextPage={allUsers.isFetchingNextPage}
          noResultsLabel={
            <HuStateCard
              sx={{ border: 'none' }}
              slotProps={{
                title: {
                  title: t('no_results_with_filters'),
                },
                avatar: {
                  Icon: IconZoomExclamation,
                },
              }}
            />
          }
        >
          {allUsers.data?.pages
            .flatMap(page => page.data.items)
            .map(user => (
              <Stack
                key={user.id}
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 1,
                }}
              >
                <HuCheckbox
                  onClick={() =>
                    form.setValue('userIds', addOrRemove(userIds, user.id))
                  }
                  checked={userIds.includes(user.id)}
                />
                <HuUserAvatar
                  user={user}
                  profileProps={{ showEmployeeInternalId: true }}
                  sx={{ maxWidth: 500 }}
                />
              </Stack>
            ))}
        </InfiniteList>
      </FormProvider>
      {segmentationFiltersDrawer.drawer}
    </Stack>
  );
};

export default IndividualCriteriaDrawerContent;