import { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';

import {
  IconCircleNumber1,
  IconPencil,
  IconTrash,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuMenuList from '@material-hu/components/composed-components/MenuList';
import HuAvatar from '@material-hu/components/design-system/Avatar';
import CardContainer, {
  type CardContainerProps,
} from '@material-hu/components/design-system/CardContainer';
import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import HuTitle from '@material-hu/components/design-system/Title';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import { type ApprovalUsersInfo, type PolicyForm } from 'src/types/vacations';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { STEP_ICONS } from './components/ApprovalStepList';
import { getStepUsersReachedCount } from './utils';

type ApprovalStepCardsProps = {
  approvalUsers: ApprovalUsersInfo[];
  cardProps?: {
    color?: CardContainerProps['color'];
    menuProps?: {
      handleEditStep: (index: number) => void;
      handleRemoveStep: (index: number) => void;
    };
  };
};

const ApprovalStepCards = ({
  approvalUsers,
  cardProps,
}: ApprovalStepCardsProps) => {
  const { t } = useLokaliseTranslation('approval_requests');
  const policyForm = useFormContext<PolicyForm>();

  const { data: segmentationData = [], isLoading: isLoadingSegmentationData } =
    useSegmentationGroups(
      {
        select: r =>
          r.data.flatMap(group =>
            group.items.map(item => ({
              id: item.id,
              usersCount: Number(item.usersCount || 0),
            })),
          ),
      },
      true,
      false,
    );

  const enabledSteps = approvalUsers.filter(step => step.enabledStep);

  useEffect(() => {
    const totalUsersReachedCount = approvalUsers.reduce((acc, step) => {
      return acc + getStepUsersReachedCount(step, segmentationData);
    }, 0);
    policyForm.setValue('totalApproversUsersCount', totalUsersReachedCount);
  }, [approvalUsers, segmentationData]);

  return (
    <Stack sx={{ gap: 1 }}>
      {approvalUsers.map((step, index) => {
        if (!step.enabledStep) return null;

        const isLastStep = index === enabledSteps.length - 1;
        const isFirstStep = index === 0;

        const stepUsersReachedCount = getStepUsersReachedCount(
          step,
          segmentationData,
        );

        const StepIcon = STEP_ICONS[index] || IconCircleNumber1;

        return (
          <CardContainer
            key={index}
            fullWidth
            color={cardProps?.color}
          >
            <Stack
              sx={{
                flexDirection: 'row',
                gap: 2,
                alignItems: 'center',
                justifyContent: 'space-between',
              }}
            >
              <Stack
                sx={{
                  flexDirection: 'row',
                  gap: 2,
                  width: '100%',
                  alignItems: 'center',
                }}
              >
                <HuAvatar
                  Icon={StepIcon}
                  size="medium"
                  color="primary"
                />
                {!isLoadingSegmentationData && (
                  <HuTitle
                    title={t(`step_configuration.step_${index + 1}`)}
                    description={t('step_configuration.approval_step_reached', {
                      count: stepUsersReachedCount,
                    })}
                  />
                )}
                {isLoadingSegmentationData && <Spinner centered />}
              </Stack>
              {!!cardProps?.menuProps && (
                <HuMenuList
                  options={[
                    ...insertIf(!!cardProps?.menuProps?.handleEditStep, {
                      title: t('general:edit_step'),
                      onClick: () =>
                        cardProps?.menuProps?.handleEditStep(index),
                      Icon: IconPencil,
                    }),
                    ...insertIf(!!cardProps?.menuProps?.handleRemoveStep, {
                      title: t('general:delete_step'),
                      onClick: () =>
                        cardProps?.menuProps?.handleRemoveStep(index),
                      Icon: IconTrash,
                      disabled: !isLastStep || isFirstStep,
                    }),
                  ]}
                />
              )}
            </Stack>
          </CardContainer>
        );
      })}
    </Stack>
  );
};

export default ApprovalStepCards;