import { useQuery } from 'react-query';

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

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import { getVacationsDetail } from 'src/services/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { vacationsKeys } from '../../queries';

import BaseDataRequest from './BaseDataRequest';

type getCalendarRequestDrawer = {
  requestId: number;
};

const getCalendarRequestDrawer: GetDrawerConfiguration<
  getCalendarRequestDrawer
> = props => {
  const { requestId, closeDrawer, open } = props;
  const { t } = useLokaliseTranslation('time_off');

  const { data: vacationDetail, isLoading } = useQuery(
    vacationsKeys.detail(requestId),
    () => getVacationsDetail(requestId, { collaboratorCalendarView: true }),
    {
      select: res => res.data,
      enabled: open,
    },
  );

  return {
    title: t('absence.detail'),
    children: (
      <>
        {isLoading && <HuCircularProgress centered />}
        {!isLoading && <BaseDataRequest vacationDetail={vacationDetail!} />}
      </>
    ),
    onClose: () => closeDrawer(),
  };
};

export default getCalendarRequestDrawer;