import * as React from 'react'
import Mousetrap from 'mousetrap'

import Box from '../Box'
import Button from '../Button'
import Card from '../Card'
import Divider from '../Divider'
import StackView from '../StackView'

export type Props = {
  /** Render slot for header. */
  header?: any

  /** Render slot for sidebar. */
  sidebar?: any

  /** Size of sidebar in pixels or `fill` for full width when open. */
  sidebarWidth?: number | 'fill'

  /** Render slot for table. */
  table?: any

  /** Render slot for toolbar. */
  toolbar?: any
}

export function FilterLayout(props: Props) {
  const {
    header,
    sidebarWidth = 400,
    sidebar,
    table,
    toolbar,
    ...restProps
  } = props
  const fill = sidebarWidth === 'fill'
  const [sidebarOpen, setSidebarOpen] = React.useState(false)
  const toggleSidebar = React.useCallback(() => {
    setSidebarOpen((sidebarOpen) => !sidebarOpen)
  }, [])
  React.useEffect(() => {
    Mousetrap.bind('f', toggleSidebar)
    return () => {
      Mousetrap.unbind('f')
    }
  }, [])
  return (
    <Card minHeight={50} overflow={undefined} {...restProps}>
      <StackView axis="horizontal" minHeight={6}>
        <Button
          grow={0}
          shrink={0}
          basis={sidebarOpen ? (fill ? '100%' : sidebarWidth + 'px') : '100px'}
          distribution={sidebarOpen ? 'space-between' : undefined}
          width="100%"
          paddingHorizontal={2}
          borderRightWidth={1}
          borderRightColor="separatorTertiary"
          radius={0}
          title="Filter"
          aria-label={sidebarOpen ? 'close filter' : 'open filter'}
          iconRight={{ name: sidebarOpen ? 'caret-left' : 'filter' }}
          onClick={toggleSidebar}
        />
        <Box visible={!(sidebarOpen && fill)} grow={1} shrink={1}>
          {header}
        </Box>
      </StackView>
      <Divider />
      <StackView axis="horizontal" grow={1}>
        <StackView
          visible={sidebarOpen}
          basis={fill ? '100%' : sidebarWidth + 'px'}
          borderRightWidth={1}
          borderRightColor="separatorTertiary"
          backgroundColor="surfaceSecondary"
        >
          {sidebar}
        </StackView>
        <StackView
          visible={!(sidebarOpen && fill)}
          grow={1}
          shrink={1}
          basis="100%"
        >
          {toolbar}
          <Divider />
          {table}
        </StackView>
      </StackView>
    </Card>
  )
}