lti-web-client/src/components/Drawer.tsx

'use client';

import { ReactNode } from 'react';

import { cn } from '@/lib/helper';

interface DrawerProps {
  children?: ReactNode;
  sidebarContent?: ReactNode;
  open: boolean;
  setOpen: (newOpenState: boolean) => void;
  openOnLarge?: boolean;
  variant?: 'sidebar' | 'left' | 'right';
  zIndex?: string;
  className?: DrawerClassName;
  onBackdropClick?: () => void;
  closeOnBackdropClick?: boolean;
}

type DrawerClassName = {
  drawer?: string;
  drawerContent?: string;
  drawerSide?: string;
  drawerOverlay?: string;
  drawerSidebarContent?: string;
};

const Drawer = ({
  children,
  sidebarContent,
  open,
  setOpen,
  openOnLarge,
  variant = 'sidebar',
  zIndex = '20',
  className,
  onBackdropClick,
  closeOnBackdropClick = true,
}: DrawerProps) => {
  const getDrawerClassNames = (): DrawerClassName => {
    const baseClassNames = {
      drawer: 'drawer',
      drawerContent: 'drawer-content',
      drawerSide: 'drawer-side',
      drawerOverlay: 'drawer-overlay',
      drawerSidebarContent: 'min-h-full bg-base-100',
    };

    if (variant === 'sidebar') {
      return {
        ...baseClassNames,
        drawerSidebarContent: cn(
          baseClassNames.drawerSidebarContent,
          'w-full max-w-[300px] lg:w-[300px]'
        ),
      };
    } else if (variant === 'right') {
      return {
        ...baseClassNames,
        drawer: cn(baseClassNames.drawer, 'drawer-end'),
        drawerSide: cn(
          baseClassNames.drawerSide,
          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
        ),
        drawerSidebarContent: cn(
          baseClassNames.drawerSidebarContent,
          'w-full min-w-120 sm:w-fit'
        ),
      };
    } else if (variant === 'left') {
      return {
        ...baseClassNames,
        drawerSide: cn(
          baseClassNames.drawerSide,
          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
        ),
        drawerSidebarContent: cn(
          baseClassNames.drawerSidebarContent,
          'w-full min-w-120 sm:w-fit'
        ),
      };
    }
    return baseClassNames; // Fallback for default or unknown variant
  };

  const varianClassName = getDrawerClassNames();

  const toggleDrawer = () => {
    setOpen(!open);
  };

  const closeDrawer = () => {
    if (closeOnBackdropClick) {
      setOpen(false);
    }
    onBackdropClick && onBackdropClick();
  };

  return (
    <div
      className={cn(
        'drawer',
        {
          'lg:drawer-open': openOnLarge,
        },
        varianClassName?.drawer,
        className?.drawer
      )}
    >
      <input
        type='checkbox'
        checked={open}
        onChange={toggleDrawer}
        className='drawer-toggle'
      />

      {/* Drawer Content */}
      <div
        className={cn(varianClassName?.drawerContent, className?.drawerContent)}
      >
        {children}
      </div>

      {/* Drawer Side */}
      <div
        className={cn(
          varianClassName?.drawerSide,
          className?.drawerSide,
          zIndex
        )}
      >
        <label
          aria-label='close sidebar'
          className={cn(
            varianClassName?.drawerOverlay,
            className?.drawerOverlay
          )}
          onClick={closeDrawer}
        />

        {/* Sidebar Content */}
        <div
          className={cn(
            varianClassName?.drawerSidebarContent,
            className?.drawerContent
          )}
        >
          {sidebarContent}
        </div>
      </div>
    </div>
  );
};

export default Drawer;