import { useState } from 'react';

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

import FilterButton from '@material-hu/components/composed-components/Filters/FiltersButton';
import Checkbox from '@material-hu/components/design-system/Checkbox/Checkbox';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { ColabStatus } from '../../types';

type FilterByStatusDrawerProps = {
  setStatusesParam: (statuses: ColabStatus[]) => void;
  statusesParam: ColabStatus[];
  courseHasDigitalSignature: boolean;
};

export const FilterByStatusDrawer = ({
  setStatusesParam,
  statusesParam,
  courseHasDigitalSignature,
}: FilterByStatusDrawerProps) => {
  const { t } = useLokaliseTranslation('learning');
  const HuGoThemeProvider = useHuGoTheme();
  const [selectedIds, setSelectedIds] = useState<ColabStatus[]>(statusesParam);

  const handleApplyFilters = () => {
    setStatusesParam(selectedIds);
    closeCategoryFiltersDrawer();
  };

  const handleCleanFilters = () => {
    setSelectedIds([]);
    setStatusesParam([]);
    closeCategoryFiltersDrawer();
  };

  const statuses = [
    {
      id: ColabStatus.PENDING,
      name: t('reports.status.PENDING'),
    },
    {
      id: ColabStatus.IN_PROGRESS,
      name: t('reports.status.IN_PROGRESS'),
    },
    {
      id: ColabStatus.FINISHED,
      name: t('reports.status.FINISHED'),
    },
    ...insertIf(courseHasDigitalSignature, {
      id: ColabStatus.PENDING_SIGNATURE,
      name: t('reports.status.PENDING_SIGNATURE'),
    }),
  ];

  const handleSelectStatus = (status: ColabStatus) => {
    if (selectedIds.includes(status)) {
      setSelectedIds(selectedIds.filter(id => id !== status));
    } else {
      setSelectedIds([...selectedIds, status]);
    }
  };

  const {
    showDrawer: showCategoryFiltersDrawer,
    drawer: categoryFiltersDrawer,
    closeDrawer: closeCategoryFiltersDrawer,
  } = useDrawerV2(() => ({
    children: (
      <Stack sx={{ gap: 1 }}>
        <Typography
          component="h2"
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {t('common.status')}
        </Typography>
        <Stack
          sx={{ gap: 1 }}
          component="ul"
        >
          {statuses.map(status => (
            <Checkbox
              key={status.id}
              label={status.name}
              checked={selectedIds.includes(status.id)}
              onChange={() => handleSelectStatus(status.id)}
            />
          ))}
        </Stack>
      </Stack>
    ),
    title: t('general:filter_by'),
    primaryButtonProps: {
      children: t('general:confirm'),
      fullWidth: true,
      disabled: !selectedIds.length,
      onClick: handleApplyFilters,
    },
    secondaryButtonProps: {
      children: t('general:clean_filters'),
      fullWidth: true,
      onClick: handleCleanFilters,
    },
  }));

  return (
    <HuGoThemeProvider>
      {categoryFiltersDrawer}
      <FilterButton
        count={selectedIds.length}
        onClick={() => showCategoryFiltersDrawer({})}
      />
    </HuGoThemeProvider>
  );
};
