import { useState } from 'react';

import Drawer from '@material-hu/mui/Drawer';

import { DrawerProps } from '@material-hu/components/design-system/Drawer/types';

export type GetDrawerConfiguration<T = {}> = (
  props: {
    closeDrawer: () => void;
    open: boolean;
  } & T,
) => Partial<DrawerProps>;

export function useTaskFocus<T>(
  getDrawerConfiguration?: GetDrawerConfiguration<T>,
) {
  const [open, setOpen] = useState(false);
  const closeDrawer = () => setOpen(false);
  const [drawerContentProps, setDrawerContentProps] = useState<T>({} as T);

  const drawerProps =
    getDrawerConfiguration?.({
      closeDrawer,
      open,
      ...drawerContentProps,
    }) || {};

  return {
    drawer: (
      <Drawer
        open={open}
        onClose={closeDrawer}
        anchor="bottom"
        disableEscapeKeyDown
        PaperProps={{
          sx: {
            width: '100%',
          },
        }}
        {...drawerProps}
      />
    ),
    closeDrawer,
    showDrawer: (props: T) => {
      setDrawerContentProps(props);
      setOpen(true);
    },
  };
}