import { lazy, Suspense, useCallback } from 'react';

import { useDrawerLayer } from '@material-hu/components/layers/Drawers';

const KudosCreateDrawer = lazy(() => import('../components/KudosCreateDrawer'));

export const useCreateAcknowledgementDrawer = () => {
  const { openDrawer } = useDrawerLayer();

  const openCreateAcknowledgementDrawer = useCallback(
    (acknowledgementId?: number) => {
      openDrawer({
        content: (
          <Suspense>
            <KudosCreateDrawer acknowledgementId={acknowledgementId} />
          </Suspense>
        ),
      });
    },
    [openDrawer],
  );

  return { openCreateAcknowledgementDrawer };
};