import { useEffect, useMemo, useState } from 'react';
import { FormProvider, useForm, useWatch } from 'react-hook-form';

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

import HuAccordion from '@material-hu/components/design-system/Accordion';
import HuAlert from '@material-hu/components/design-system/Alert';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox/form';
import HuTitle from '@material-hu/components/design-system/Title';

import { type SegmentationType } from 'src/types/user';
import { type ApprovalUsersInfo } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

import { PeopleAccordion } from '../../Documents/Filter/Drawer';

type ApprovalStepFormValues = {
  stepIndex?: number;
  setApprovalUsers: (value: ApprovalUsersInfo[]) => void;
  approvalUsers: ApprovalUsersInfo[];
  drawerProps?: {
    onSave?: () => void;
  };
};

const DEFAULT_STEP_VALUES = {
  boss: false,
  secondBoss: false,
  designatedReviewer: false,
  itemIds: [] as number[],
  users: [] as number[],
};

type SegmentationData = {
  id: number;
  usersCount: number;
};

export const useApprovalStepDrawer: GetDrawerConfiguration<
  ApprovalStepFormValues
> = args => {
  const {
    closeDrawer,
    open,
    stepIndex,
    setApprovalUsers,
    approvalUsers,
    drawerProps,
  } = args;
  const { t } = useLokaliseTranslation('time_off');
  const [segmentationData, setSegmentationData] = useState<SegmentationData[]>(
    [],
  );

  const approvalForm = useForm({
    defaultValues: DEFAULT_STEP_VALUES,
  });

  const segmentationItemIds = useWatch({
    control: approvalForm.control,
    name: 'itemIds',
  });

  useEffect(() => {
    if (open) {
      const currentStep = approvalUsers[stepIndex || 0];

      approvalForm.reset({
        boss: currentStep?.boss,
        secondBoss: currentStep?.secondBoss,
        designatedReviewer: currentStep?.designatedReviewer,
        itemIds: currentStep?.itemIds,
        users: currentStep?.users,
      });
    }
  }, [stepIndex, open]);

  const handleSaveApprovalStep = () => {
    const updatedApprovalUsers = approvalUsers;

    updatedApprovalUsers[stepIndex ?? 0] = {
      ...approvalForm.getValues(),
      enabledStep: true,
    };

    setApprovalUsers(updatedApprovalUsers);

    approvalForm.reset();
    drawerProps?.onSave?.();
    closeDrawer();
  };

  const handleCancel = () => {
    approvalForm.reset();
    closeDrawer();
  };

  const renderFooter = segmentationItemIds.length > 0;

  const reachedSegmentationUsersCount = useMemo(() => {
    return segmentationItemIds.reduce((acc, curr) => {
      return (
        acc + (segmentationData.find(item => item.id === curr)?.usersCount || 0)
      );
    }, 0);
  }, [segmentationItemIds, segmentationData]);

  return {
    title: t('select_approvers'),
    onClose: handleCancel,
    children: (
      <FormProvider {...approvalForm}>
        <Stack sx={{ gap: 2 }}>
          <PeopleAccordion
            name="users"
            enabled={open}
          />
          <HuAccordion
            title={t('assign_by_role')}
            description={t('assign_by_role_helper')}
            elevation={0}
            defaultExpanded={true}
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background?.elements?.grey,
            }}
            customDetail={
              <HuCardContainer fullWidth>
                <Stack sx={{ gap: 2 }}>
                  <HuFormCheckbox
                    name="boss"
                    checkBoxProps={{
                      label: t('DIRECT_BOSS'),
                      description: t('direct_boss_helper'),
                    }}
                  />
                  <HuFormCheckbox
                    name="secondBoss"
                    checkBoxProps={{
                      label: t('ASSIGN_SECOND_BOSS_AS_RESPONSIBLE'),
                      description: t('second_boss_helper'),
                    }}
                  />
                  <HuFormCheckbox
                    name="designatedReviewer"
                    checkBoxProps={{
                      label: t('ASSIGN_DESIGNATED_REVIEWER_AS_RESPONSIBLE'),
                      description: t('designated_reviewer_helper'),
                    }}
                  />
                </Stack>
              </HuCardContainer>
            }
          />

          <Stack sx={{ gap: 2 }}>
            <HuTitle
              variant="M"
              title={t('segmentation')}
              description={t('approval_segmentation_helper')}
            />
            <FormSegmentationGroupSelector
              name="itemIds"
              showHeader={false}
              withUsersCount={true}
              queryOptions={{
                onSuccess: (data: SegmentationType[]) => {
                  setSegmentationData(
                    data
                      .flatMap(item => item.items)
                      .map(item => ({
                        id: item.id,
                        usersCount: Number(item.usersCount || 0),
                      })),
                  );
                },
              }}
              sx={{
                '& .MuiAccordion-root': {
                  backgroundColor: theme =>
                    theme.palette.new.background.elements.grey,
                },
              }}
            />
          </Stack>
        </Stack>
      </FormProvider>
    ),
    primaryButtonProps: {
      children: t('general:save'),
      onClick: handleSaveApprovalStep,
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      onClick: handleCancel,
    },
    ...(renderFooter && {
      footer: (
        <HuAlert
          severity="info"
          title={t('total_users_in_approval_step', {
            count: reachedSegmentationUsersCount,
          })}
        />
      ),
    }),
  };
};