import { Fragment } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

import { isBasicAllowance, type PolicyForm } from 'src/types/vacations';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { policyFormFields } from '../../constants';

import AllowanceIncreaseSummaryStepAccordion from './AllowanceIncreaseSummaryStepAccordion';
import AllowanceSummaryStepAccordion from './AllowanceSummaryStepAccordion';
import ApprovalWorkflowSummaryStepAccordion from './ApprovalWorkflowSummaryStepAccordion';
import BalanceLimitSummaryStepAccordion from './BalanceLimitSummaryStepAccordion';
import DetailsSummaryStepsAccordion from './DetailsSummaryStepsAccordion';
import ProratationAllowanceSummaryStepAccordion from './ProratationAllowanceSummaryStepAccordion';
import RequestStepSummaryStepAccordion from './RequestStepSummaryStepAccordion';

type SummaryStepProps = {
  showTitle?: boolean;
};

export const SummaryStep = ({ showTitle = true }: SummaryStepProps) => {
  const { t } = useLokaliseTranslation('time_off');
  const form = useFormContext<PolicyForm>();

  const [allowanceType] = useWatch({
    control: form.control,
    name: [policyFormFields.allowance.allowanceType],
  });

  const isTheBasicAllowance = isBasicAllowance(allowanceType);

  const components = [
    {
      key: 'details',
      component: <DetailsSummaryStepsAccordion />,
    },
    {
      key: 'allowance',
      component: <AllowanceSummaryStepAccordion />,
    },
    ...insertIf(isTheBasicAllowance, {
      key: 'proration-allowance',
      component: <ProratationAllowanceSummaryStepAccordion />,
    }),
    {
      key: 'balance-limit',
      component: <BalanceLimitSummaryStepAccordion />,
    },
    ...insertIf(isTheBasicAllowance, {
      key: 'allowance-increase',
      component: <AllowanceIncreaseSummaryStepAccordion />,
    }),
    {
      key: 'request',
      component: <RequestStepSummaryStepAccordion />,
    },
    {
      key: 'approval',
      component: <ApprovalWorkflowSummaryStepAccordion />,
    },
  ];

  return (
    <Stack sx={{ gap: 2 }}>
      {showTitle && (
        <HuTitle
          title={t('general:summary')}
          variant="L"
        />
      )}
      {components.map(component => (
        <Fragment key={component?.key}>{component?.component}</Fragment>
      ))}
    </Stack>
  );
};