import { type FC, useState } from 'react';

import Drawer from '../components/design-system/Drawer';
import { type DrawerProps } from '../components/design-system/Drawer/types';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { useDrawerV2 } from './useDrawerV2';

/**
 *
 * @deprecated Use `useDrawerLayer` or `useDrawerLayerItem` instead
 */
function useDrawer<T>(
  DrawerContentComponent: FC<T>,
  drawerProps?: Partial<DrawerProps>,
  extraProps?: Partial<T>,
) {
  const [open, setOpen] = useState(false);
  const closeDrawer: () => void = () => setOpen(false);
  const [drawerContentProps, setDrawerContentProps] = useState<Partial<T>>();

  return {
    drawer: (
      <Drawer
        open={open}
        onClose={closeDrawer}
        {...drawerProps}
      >
        <DrawerContentComponent
          onClose={closeDrawer}
          {...(drawerContentProps as T)}
          {...extraProps}
        />
      </Drawer>
    ),
    closeDrawer,
    showDrawer: (props: Partial<T> = {}) => {
      setDrawerContentProps(props);
      setOpen(true);
    },
  };
}

export { useDrawer };