import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';

import HuFiltersButton from '@material-hu/components/composed-components/Filters/FiltersButton';

import { useFilterParams } from '../../../hooks/useFilterParams';
import { JourneyAssignee } from '../../../types/task';

import { getCollaboratorsFilterDrawer } from './getCollaboratorsFilterDrawer';

type CollaboratorsProps = {
  isUserTasksModule: boolean;
  collaborators: JourneyAssignee[];
};

export const Collaborators = ({
  isUserTasksModule,
  collaborators,
}: CollaboratorsProps) => {
  const { filterParams } = useFilterParams();
  const collaboratorsFilterDrawer = useDrawerV2(getCollaboratorsFilterDrawer);

  // Amount of selected collaborators on the URL query
  const collaboratorsCount = filterParams.collaborators?.split(',').length;

  if (!isUserTasksModule) return null;

  const handleOpenCollaboratorsDrawer = () => {
    collaboratorsFilterDrawer.showDrawer({ collaborators });
  };

  return (
    <>
      <HuFiltersButton
        slotProps={{ button: { disabled: !collaborators.length } }}
        onClick={handleOpenCollaboratorsDrawer}
        count={collaboratorsCount || 0}
      />
      {collaboratorsFilterDrawer.drawer}
    </>
  );
};
