import { useLayoutConfigStore } from 'src/store/useLayoutConfigStore';
import { Component, computed, toRefs } from 'vue';

export function useDrawer() {
  const layoutConfig = useLayoutConfigStore();
  const drawer = computed(() => layoutConfig.drawer);
  const show = () => layoutConfig.showDrawer();
  const hide = () => layoutConfig.hideDrawer();
  const { title, props: data, show: isShowing, component, width } = toRefs(drawer.value);

  const setContent = (payload: { component?: Component; title?: string; props?: Record<string, any> }, saveState = false) => {
    layoutConfig.setDrawer({ payload, saveState });
  };

  const back = () => {
    layoutConfig.backToPrevDrawerState();
  };

  return {
    title,
    show,
    hide,
    setContent,
    data,
    isShowing,
    component,
    width,
    back,
  };
}