import { Box } from 'components/common';
import { ErrorBoundary } from 'components/ErrorBoundary';

import { SidebarToggle } from './SidebarToggle';

interface SidebarPanelProps {
  show: boolean;
  onToggle: React.MouseEventHandler<HTMLDivElement>;
  side?: 'left' | 'right';
  width?: number;
  children: React.ReactNode;
}

export const SidebarPanel = ({
  show,
  onToggle,
  side = 'left',
  width = 240,
  children,
}: SidebarPanelProps) => {
  return (
    <Box
      position="relative"
      width={show ? width : 'auto'}
      height="100%"
      // overflow="auto"
      flex="none"
    >
      <SidebarToggle
        style={{
          [side]: show ? '100%' : 0,
          transform: `translateX(${side === 'left' ? '-' : ''}${
            show ? 50 : 0
          }%)`,
        }}
        onClick={onToggle}
        // side={side}
        align={show ? 'center' : side}
      />
      {show && (
        <ErrorBoundary>
          <Box width="100%" height="100%" overflow="auto">
            {children}
          </Box>
        </ErrorBoundary>
      )}
    </Box>
  );
};