import { useState } from 'react';

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

import HuTabs from '@material-hu/components/design-system/Tabs';

import { type MeUser } from 'src/types/user';
import {
  ProrationFrequency,
  type ResponseDetailPolicyTypes,
} from 'src/types/vacations';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { BalanceConformationCurrent } from './BalanceConformationCurrent';
import { BalanceConformationFuture } from './BalanceConformationFuture';

type BalanceConformationDrawer = {
  userCollaborator: MeUser;
  policyTypeDetail: ResponseDetailPolicyTypes;
};

export const getBalanceConformationDrawer: GetDrawerConfiguration<
  BalanceConformationDrawer
> = ({ policyTypeDetail, closeDrawer, userCollaborator }) => {
  const { t } = useLokaliseTranslation('time_off');

  const tabs = [
    {
      label: t('current_balance'),
      value: 'CYCLE',
      Component: BalanceConformationCurrent,
    },
    ...insertIf(
      policyTypeDetail?.allowanceProrationFrequency ===
        ProrationFrequency.EVERY_TWELVE_MONTHS,
      {
        label: t('projected_balance'),
        value: 'BALANCE',
        Component: BalanceConformationFuture,
      },
    ),
  ];
  const [currentTab, setCurrentTab] = useState(tabs[0].value);
  const CurrentComponent = tabs.find(
    tab => tab.value === currentTab,
  )!.Component;

  return {
    title: t('BALANCE_COMPOSITION'),
    onClose: closeDrawer,
    hasBackButton: true,
    children: (
      <>
        <HuTabs
          tabs={tabs}
          value={currentTab}
          onTabChange={setCurrentTab}
          sx={{ mb: 3 }}
        />
        <CurrentComponent
          policyTypeDetail={policyTypeDetail}
          userCollaborator={userCollaborator}
        />
      </>
    ),
  };
};