'use client';

import React, { ReactNode } from 'react';
import { useCallback } from 'react';
import { atom, useAtom } from 'jotai';
import { Drawer } from 'rizzui';
import { usePathname } from 'next/navigation';
import cn from '../../utils/class-names';

/* ------------------------------------------------------------------ */
/* TYPES */
/* ------------------------------------------------------------------ */

export type DrawerPlacements = 'left' | 'right' | 'top' | 'bottom';

type DrawerState = {
  isOpen: boolean;
  view: ReactNode | null;
  placement: DrawerPlacements;
  containerClassName?: string;
};

/* ------------------------------------------------------------------ */
/* GLOBAL STATE (ATOM) */
/* ------------------------------------------------------------------ */

const drawerAtom = atom<DrawerState>({
  isOpen: false,
  view: null,
  placement: 'right',
  containerClassName: '',
});

/* ------------------------------------------------------------------ */
/* HOOK */
/* ------------------------------------------------------------------ */

export function useDrawer() {
  const [state, setState] = useAtom(drawerAtom);

  const openDrawer = ({
    view,
    placement = 'right',
    containerClassName = '',
  }: {
    view: ReactNode;
    placement?: DrawerPlacements;
    containerClassName?: string;
  }) => {
    setState({
      isOpen: true,
      view,
      placement,
      containerClassName,
    });
  };

  const closeDrawer = useCallback(() => {
    setState((prev) => ({
      ...prev,
      isOpen: false,
      view: null,
    }));
  }, [setState]);

  return {
    ...state,
    openDrawer,
    closeDrawer,
  };
}

/* ------------------------------------------------------------------ */
/* DRAWER CONTAINER (GLOBAL MOUNT COMPONENT) */
/* ------------------------------------------------------------------ */

export function DrawerProvider() {
  const { isOpen, view, placement, closeDrawer, containerClassName } =
    useDrawer();

  const pathname = usePathname();

  React.useEffect(() => {
    closeDrawer();
  }, [pathname, closeDrawer]);

  return (
    <Drawer
      isOpen={isOpen}
      onClose={closeDrawer}
      placement={placement}
      overlayClassName="dark:bg-opacity-40 dark:backdrop-blur-md"
      containerClassName={cn(
        'dark:bg-gray-100 min-w-min max-w-[420px]',
        containerClassName
      )}
      className="z-[9999] h-screen"
    >
      {view}
    </Drawer>
  );
}