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;
  expandedContent?: ReactNode;
  expandedWidth?: string;
}

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,
  expandedContent,
  expandedWidth = 'w-[400px]',
}: DrawerProps) => {
  const getDrawerClassNames = (): DrawerClassName => {
    const baseClassNames = {
      drawer: 'drawer',
      drawerContent: 'drawer-content',
      drawerSide: 'drawer-side',
      drawerOverlay: 'drawer-overlay',
      drawerSidebarContent: 'min-h-full bg-base-100',
    };

    const getSidebarWidth = () => {
      if (variant === 'sidebar') {
        return expandedContent
          ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
          : 'w-full max-w-[300px] lg:w-[300px]';
      }
      return 'w-full sm:min-w-120 sm:w-fit';
    };

    if (variant === 'sidebar') {
      return {
        ...baseClassNames,
        drawerSidebarContent: cn(
          baseClassNames.drawerSidebarContent,
          getSidebarWidth()
        ),
      };
    } else if (variant === 'right') {
      return {
        ...baseClassNames,
        drawer: cn(baseClassNames.drawer, 'drawer-end'),
        drawerSide: cn(
          baseClassNames.drawerSide,
          'border-l border-solid border-gray-200 sm:drawer-side w-screen top-0 right-0 fixed z-21'
        ),
        drawerSidebarContent: cn(
          baseClassNames.drawerSidebarContent,
          getSidebarWidth()
        ),
      };
    } 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,
          getSidebarWidth()
        ),
      };
    }
    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 - Full height container */}
        <div
          className={cn(
            'flex h-screen bg-base-100 overflow-hidden',
            variant === 'right' && 'flex-row'
          )}
        >
          {/* Primary Sidebar Content */}
          <div
            className={cn(
              varianClassName?.drawerSidebarContent,
              className?.drawerContent,
              'overflow-y-auto'
            )}
          >
            {sidebarContent}
          </div>

          {/* Expanded Drawer (Right side, side-by-side) */}
          {expandedContent && (
            <div
              className={cn(
                'border-l border-gray-200 bg-white flex flex-col h-full',
                expandedWidth
              )}
            >
              <div className='overflow-y-auto flex-1 h-full'>
                {expandedContent}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Drawer;