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

import HuAccordion from '@material-hu/components/design-system/Accordion';
import HuCardcontainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

import { useRequiredAuth } from 'src/contexts/JWTContext';
import { useFutureBalancesConformation } from 'src/hooks/queryHooks/vacations';
import { type MeUser } from 'src/types/user';
import { type ResponseDetailPolicyTypes } from 'src/types/vacations';
import { formatDateInVacations } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  getSymbolByAmount,
  getUnitTranslation,
  joinTwoDates,
} from 'src/utils/vacations';

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

export const BalanceConformationFuture = ({
  policyTypeDetail,
  userCollaborator,
}: BalanceConformationFutureProps) => {
  const { t } = useLokaliseTranslation('time_off');
  const { user: loggedUser } = useRequiredAuth();

  const { data } = useFutureBalancesConformation(
    policyTypeDetail.id,
    userCollaborator.id,
  );

  if (!data) return null;

  const newallowanceTitle = t(
    `${getSymbolByAmount(data.newAllowance)}${data.newAllowance.toString()} ${getUnitTranslation(policyTypeDetail, data.newAllowance, t)}`,
  );

  const remnantCarriedOverTitle = t(
    `${getSymbolByAmount(data.remnantCarriedOver)}${data.remnantCarriedOver.toString()} ${getUnitTranslation(policyTypeDetail, data.remnantCarriedOver, t)}`,
  );

  const futureRequestsAmountTitle = t(
    `${getSymbolByAmount(data.futureRequestsAmount, true)}${data.futureRequestsAmount.toString()} ${getUnitTranslation(policyTypeDetail, data.futureRequestsAmount, t)}`,
  );

  const dataContainers = [
    {
      title: newallowanceTitle,
      description: t('balance_accreditation'),
      detail: t('balance_accreditation_details', {
        date: formatDateInVacations({
          date: data.cycle.startDate,
          user: loggedUser,
          type: 'P',
        }),
        cycle: joinTwoDates(
          data.cycle.startDate,
          data.cycle.endDate,
          loggedUser,
        ),
      }),
    },
    {
      title: remnantCarriedOverTitle,
      description: t('expected_carryover'),
      detail: t('expected_carryover_details'),
    },
    {
      title: futureRequestsAmountTitle,
      description: t('amount_requested'),
      detail: t('amount_requested_details'),
    },
  ];

  const formattedStartCycle = formatDateInVacations({
    date: data.cycle.startDate,
    user: loggedUser,
    type: 'P',
  });

  return (
    <Stack>
      <HuTitle
        title={`${t('general:cycle')} ${joinTwoDates(
          data.cycle.startDate,
          data.cycle.endDate,
          loggedUser,
        )}`}
        variant="M"
        sx={{ mb: 2 }}
      />
      <HuCardcontainer
        fullWidth
        sx={{ mb: 4 }}
      >
        <HuTitle
          copetin={t('available_time')}
          title={`${data.totalAvailable.toString()} ${getUnitTranslation(policyTypeDetail, data.remnantCarriedOver, t)}`}
          description={t('projected_to', { date: formattedStartCycle })}
          variant="XL"
        />
      </HuCardcontainer>
      <HuTitle
        title={t('general:summary')}
        variant="M"
      />

      <Stack sx={{ gap: 1.5, mt: 2 }}>
        {dataContainers.map(container => (
          <HuCardcontainer
            key={container.description}
            fullWidth
            padding={0}
          >
            <HuAccordion
              elevation={0}
              title={container.title}
              description={container.description}
              customDetail={
                <>
                  <Divider sx={{ mb: 1.5 }} />
                  <Typography
                    sx={{
                      color: theme => theme.palette.new.text.neutral.lighter,
                    }}
                    variant="globalS"
                  >
                    {container.detail}
                  </Typography>
                </>
              }
            />
          </HuCardcontainer>
        ))}
      </Stack>
    </Stack>
  );
};