import { type FC } from 'react';
import { useFormContext } from 'react-hook-form';

import { IconFilter } from '@material-hu/icons/tabler';
import Badge from '@material-hu/mui/Badge';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuFormCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox/form';
import HuDrawer from '@material-hu/components/design-system/Drawer';

import {
  getStateName,
  getStatusDetails,
} from 'src/pages/dashboard/serviceManagement/utils';
import { type State } from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  open: boolean;
  onToggle: () => void;
  onReset: () => void;
  onApply: () => void;
  statesData: State[];
  filterCount: number;
};

const StatesFilterDrawer: FC<Props> = ({
  open,
  onToggle,
  onReset,
  onApply,
  statesData,
  filterCount,
}) => {
  const { t } = useLokaliseTranslation(['service_management', 'general']);
  const { watch, setValue } = useFormContext();
  const { states } = watch();

  const handleChange = (_: any, v: boolean, stateId: string) => {
    if (v) {
      setValue('states', [...states, stateId]);
    } else {
      setValue(
        'states',
        states.filter((state: string) => state !== stateId),
      );
    }
  };

  return (
    <>
      <Button
        variant="secondary"
        startIcon={<IconFilter />}
        onClick={onToggle}
        endIcon={
          <Badge
            sx={{ mx: filterCount && 1.5 }}
            color="primary"
            badgeContent={filterCount}
          />
        }
      >
        {filterCount > 0 ? t('general:filtered') : t('general:filter')}
      </Button>
      <HuDrawer
        title={t('filter_by')}
        open={open}
        onClose={onToggle}
        primaryButtonProps={{
          onClick: onApply,
          children: t('apply'),
          fullWidth: true,
        }}
        secondaryButtonProps={{
          onClick: onReset,
          children: t('clean_filters'),
          fullWidth: true,
        }}
      >
        <Stack sx={{ overflow: 'auto', gap: 1 }}>
          <Typography
            variant="globalS"
            fontWeight="medium"
          >
            {t('state')}
          </Typography>
          <Stack
            sx={{
              gap: 2,
              p: 2,
              borderRadius: 2,
              backgroundColor: ({ palette }) =>
                palette.new.background.elements.grey,
            }}
          >
            {statesData?.map(state => (
              <HuFormCheckbox
                key={state.id}
                name={`states.${state.id}`}
                checkBoxProps={{
                  label: t(getStatusDetails(getStateName(state.name))?.title),
                  checked: states.includes(state.id),
                  onChange: (e, v) => handleChange(e, v, state.id),
                  sx: { mr: 1 },
                }}
              />
            ))}
          </Stack>
        </Stack>
      </HuDrawer>
    </>
  );
};

export default StatesFilterDrawer;
