import * as React from 'react';
import {LayoutArgs, layouts, Span} from '@tesseract-design/viewfinder-base';

export type LeftSidebarBaseProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'> & {
  span?: Span,
}

export const LeftSidebarBase = React.forwardRef<HTMLDivElement, LeftSidebarBaseProps>(({
  children,
  span = Span.WIDE,
  open = false,
  ...etcProps
}, ref) => {
  const args = React.useMemo<LayoutArgs>(() => ({
    span,
    mainSidebarOpen: open,
  }), [
    span,
    open,
  ]);

  return (
    <div
      className={layouts.LeftSidebar.SidebarBase(args)}
      {...etcProps}
      ref={ref}
    >
      <div
        className={layouts.LeftSidebar.SidebarOverflow()}
      >
        {children}
      </div>
    </div>
  )
});

LeftSidebarBase.displayName = 'LeftSidebarBase'