import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import DOMPurify from 'dompurify';

import { loanRequestsOptions } from 'src/constants/banBajio';
import { useLokaliseTranslation } from 'src/utils/i18n';

import useGetLibrary from '../libraries/hooks/useGetLibrary';

import { useCarLibraryId } from './useCarLibraryId';

const useLibraryInfoDrawer = () => {
  const { t } = useLokaliseTranslation('banbajio');

  const { data: carLibraryId, isLoading } = useCarLibraryId();

  return useDrawerV2(
    ({ module }: { module: (typeof loanRequestsOptions)[0] }) => {
      const id = module?.libraryId || carLibraryId!;
      const { data: library } = useGetLibrary(id, { enabled: !!id });
      if (!library || isLoading) return {};

      return {
        children: (
          <div
            dangerouslySetInnerHTML={{
              __html: DOMPurify.sanitize(library.body, {
                USE_PROFILES: { html: true },
              }),
            }}
          />
        ),
        title: t('LOAN_INFORMATION'),
      };
    },
  );
};

export default useLibraryInfoDrawer;