import { FC } from 'react';
import { useForm, Controller, FormProvider } from 'react-hook-form';

import CloseIcon from '@material-hu/icons/material/Close';
import Drawer from '@material-hu/mui/Drawer';
import IconButton from '@material-hu/mui/IconButton';
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 { useTranslation } from 'src/pages/dashboard/scorm/i18n';
import { FiltersFormValues } from 'src/types/scorm';
import { getActiveFilters } from 'src/utils/scorm';

import FormCheckbox from 'src/components/FormInputs/FormCheckbox';

export type ThemeFiltersProps = {
  open: boolean;
  themes: string[];
  onClose: () => void;
  handleSaveFilters: (selectedFilters: string[]) => void;
  filters: string[];
  title: string;
};

const ThemeFilters: FC<ThemeFiltersProps> = props => {
  const { open, themes, onClose, handleSaveFilters, filters, title } = props;
  const { t } = useTranslation();

  const defaultValues = themes.reduce((acc, theme) => {
    acc[theme] = filters.includes(theme);
    return acc;
  }, {});

  const form = useForm<FiltersFormValues>({
    defaultValues: {
      courseTheme: defaultValues,
    },
  });

  const { control, handleSubmit } = form;

  const handleSave = handleSubmit((data: any) => {
    const newFilters = getActiveFilters(data.courseTheme);
    handleSaveFilters(newFilters);
    onClose();
  });

  return (
    <Drawer
      anchor="right"
      open={open}
      onClose={onClose}
      sx={{ zIndex: 1300 }}
      PaperProps={{
        sx: {
          width: 360,
          px: 2,
          py: 3,
        },
      }}
    >
      <Stack sx={{ height: '100%' }}>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography variant="h6">{t('FILTER_BY')}</Typography>
          <IconButton
            aria-label={t('CLOSE')}
            onClick={onClose}
          >
            <CloseIcon />
          </IconButton>
        </Stack>
        <Stack
          sx={{
            overflow: 'auto',
            flex: 1,
            mt: 3,
            gap: 2,
          }}
        >
          <Typography variant="subtitle1">{title}</Typography>
          <FormProvider {...form}>
            <form>
              <Stack sx={{ gap: 2 }}>
                {themes.map(theme => (
                  <Controller
                    control={control}
                    name={`courseTheme.${theme}`}
                    key={theme}
                    render={({ field }) => (
                      <FormCheckbox
                        label={theme}
                        checked={field.value}
                        {...field}
                      />
                    )}
                  />
                ))}
              </Stack>
            </form>
          </FormProvider>
        </Stack>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            gap: 1,
            pt: 1,
          }}
        >
          <Button
            onClick={handleSave}
            variant="contained"
            fullWidth
          >
            {t('APPLY')}
          </Button>
        </Stack>
      </Stack>
    </Drawer>
  );
};

export default ThemeFilters;
