import type { MouseEvent as ReactMouseEvent } from 'react';

export type SidebarEventListener = (event?: Event | ReactMouseEvent) => void;
export type SidebarEventType =
  // primary right sidebar
  | 'open'
  | 'locked'
  | 'closed'
  // secondary right sidebar
  | 'openSecondary'
  | 'closedSecondary';
export type SidebarEventContainer = {
  type: SidebarEventType;
  listener: SidebarEventListener;
};

export type ContextType =
  | {
      /**
       * type of the component for the main Drawer.
       */
      mainComponent: React.ReactNode;
      /**
       *  function to insert a component into the central Drawer.
       */
      displayDifComponent: React.Dispatch<React.SetStateAction<React.ReactNode>>;
      /**
       * main Drawer
       */
      open: boolean;
      /**
       * function to open the Drawer.
       */
      setOpen: React.Dispatch<React.SetStateAction<boolean>>;
      /**
       * function that controls the behavior of the drawer (open or close in a default position).
       */
      setDrawerBehavior: (event?: Event) => void;
      /**
       * open the secondary drawer (consistently above the content).
       */
      openSecondary: boolean;
      /**
       * a function that controls the secondary drawer (open / close).
       */
      setOpenSecondary: React.Dispatch<React.SetStateAction<boolean>>;
      /**
       * this is the "component magazine" consistently show the component in index 0 (componentsArray[0]).
       */
      componentsArray: React.ReactNode[];
      /**
       * this function push a component to the index 0 in the componentsArray[].
       */
      setComponentSecondaryDrawer: (Component: React.ReactNode) => void;
      /**
       * this function remove one component form the componentsArray[0] and we "go back on history of components" and if there is no more components so it will close the secondaryDrawer.
       */
      handleComponentsArray: () => void;
      /**
       * remove all the components in the componentsArray[] and close the secondaryDrawer.
       */
      clearComponentsArray: () => void;
      /**
       * a function that controls the state of the main drawer when you click on the open button (open as part of the layout or above the content).
       */
      handleMainDrawer: (event?: Event) => void;
      /**
       * this variable means if the main drawer will be part of the layout or above the content (true mean part of the layout).
       */
      drawerLocked: boolean;
      setDrawerLocked: React.Dispatch<React.SetStateAction<boolean>>;
      setShowDrawer: React.Dispatch<React.SetStateAction<boolean>>; // this function should used inside useEffect to show the drawer in the page
      showDrawer: boolean;
      durationTime: {
        enter: number;
        exit: number;
      };
      addEventListener: (type: SidebarEventType, listener: SidebarEventListener) => void;
      removeEventListener: (type: SidebarEventType, listener: SidebarEventListener) => void;
      dispatchEvent: (type: SidebarEventType, event?: Event) => void;
      /**
       * this state for default Right-sidebar position (true mean the behavior of the Right-sidebar stay default)
       */
      defaultMod: boolean;
      setDefaultMod: React.Dispatch<React.SetStateAction<boolean>>;
    }
  /**
   * this type is optional undefined because we must supply type at the start of the context file.
   */
  | undefined;