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

import { useDrawer } from '@material-hu/hooks/useDrawer';
import { IconFilter } from '@material-hu/icons/tabler';
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 Title from '@material-hu/components/design-system/Title';

import { UsersItemsOperation } from 'src/services/usersQueries';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormEmployeesSelector from 'src/components/FormInputs/FormEmployeesSelector';
import FormSegmentationGroupSelector from 'src/components/FormInputs/FormSegmentationGroupSelector';

export type IndividualSelectionDrawerProps = {
  onConfirm?: (values: any) => Promise<void>;
  onCancel?: () => void;
  processId: number | string;
  assignmentId?: number;
  userIds?: number[];
  segmentationGroupsIds?: number[];
  formId?: string;
  disabled?: boolean;
  maxSelection?: number;
};

const fields = {
  userIds: 'userIds',
  segmentationGroupsIds: 'segmentationGroupsIds',
};

const IndividualSelectionDrawer = ({
  userIds: inheritedUserIds,
  processId,
  assignmentId,
  segmentationGroupsIds: inheritedSegmentationGroupsIds,
  onConfirm,
  formId,
  disabled,
  maxSelection,
}: IndividualSelectionDrawerProps) => {
  const { t } = useLokaliseTranslation('audience');
  const methods = useForm<{
    userIds: number[];
    segmentationGroupsIds: number[];
  }>({
    defaultValues: {
      userIds: inheritedUserIds,
      segmentationGroupsIds: inheritedSegmentationGroupsIds,
    },
  });

  const { segmentationGroupsIds } = methods.watch();

  const handleSubmit = async (values: {
    userIds: number[];
    segmentationGroupsIds: number[];
  }) => {
    await onConfirm?.({ ...values, processId, assignmentId });
  };

  const {
    drawer: segmentationGroupsDrawer,
    showDrawer: showSegmentationGroupsDrawer,
    closeDrawer: closeSegmentationGroupsDrawer,
  } = useDrawer(
    FormSegmentationGroupSelector,
    {
      title: t('general:filter_by'),
      hasBackButton: true,
      primaryButtonProps: {
        fullWidth: true,
        children: t('general:apply'),
        onClick: () => closeSegmentationGroupsDrawer(),
        disabled,
      },
      secondaryButtonProps: {
        fullWidth: true,
        children: t('general:clean_filters'),
        onClick: () => {
          methods.setValue('segmentationGroupsIds', []);
          closeSegmentationGroupsDrawer();
        },
        disabled,
      },
    },
    {
      name: fields.segmentationGroupsIds,
      allowSelectAll: false,
    },
  );

  return (
    <FormProvider {...methods}>
      <form
        id={formId}
        onSubmit={methods.handleSubmit(handleSubmit)}
        style={{ display: 'contents' }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 2,
            mb: 2,
          }}
        >
          <Title
            variant="L"
            description={t('individual_users_subtitle')}
          />
          <Button
            size="small"
            sx={{ fontSize: 'globalXS' }}
            variant="outlined"
            startIcon={<IconFilter size={16} />}
            disabled={disabled}
            endIcon={
              !!segmentationGroupsIds?.length && (
                <Stack
                  sx={{
                    backgroundColor: theme =>
                      theme.palette.new.action.button.background.primary
                        .default,
                    borderRadius: '100%',
                    color: 'white',
                    padding: 1,
                    alignSelf: 'center',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: 20,
                    height: 20,
                  }}
                >
                  <Typography
                    variant="globalXXS"
                    sx={{
                      color: theme =>
                        theme.palette.hugoBackground?.neutralBgTerciary,
                      flex: 0,
                    }}
                  >
                    {segmentationGroupsIds?.length > 9
                      ? `9+`
                      : segmentationGroupsIds?.length}
                  </Typography>
                </Stack>
              )
            }
            onClick={() => showSegmentationGroupsDrawer()}
          >
            {t('general:filter')}
          </Button>
        </Stack>
        <FormEmployeesSelector
          name={fields.userIds}
          segmentationGroupsIds={segmentationGroupsIds}
          sx={{ flex: 1 }}
          allowSelectAll={false}
          disabled={disabled}
          filterOperation={UsersItemsOperation.INTERSECT}
          maxSelection={maxSelection}
        />
      </form>
      {segmentationGroupsDrawer}
    </FormProvider>
  );
};

export default IndividualSelectionDrawer;