import { useState } from 'react';

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

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

/**
 * Manages a Drawer's open/close state and renders it with a dynamic configuration callback.
 * @deprecated Use `useDrawerLayer` or `useDrawerLayerItem` instead
 */
export function useDrawerV2<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 {
    open,
    drawer: (
      <Drawer
        open={open}
        onClose={closeDrawer}
        {...drawerProps}
      />
    ),
    closeDrawer,
    showDrawer: (props: Partial<T>) => {
      setDrawerContentProps(props as T);
      setOpen(true);
    },
  };
}