import { openNewAppModal } from '../modals'
import {
  setSidebarCollapsed,
  sidebarCollapsed,
} from '../state'
import {
  HamburgerButton,
  HamburgerLine,
  Logo,
  LogoLink,
  NewAppButton,
  Sidebar as SidebarContainer,
  SidebarFooter,
} from '../styles'
import { AppSelector } from './AppSelector'

export function Sidebar({ render }: { render: () => void }) {
  const toggleSidebar = () => {
    setSidebarCollapsed(!sidebarCollapsed)
    render()
  }

  return (
    <SidebarContainer style={sidebarCollapsed ? { width: 'auto' } : undefined}>
      {sidebarCollapsed ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0' }}>
          <HamburgerButton onClick={toggleSidebar} title="Show sidebar">
            <HamburgerLine />
            <HamburgerLine />
            <HamburgerLine />
          </HamburgerButton>
        </div>
      ) : (
        <Logo>
          <LogoLink href="/" title="Go to dashboard">
            🐾 Toes
          </LogoLink>
          <HamburgerButton onClick={toggleSidebar} title="Hide sidebar">
            <HamburgerLine />
            <HamburgerLine />
            <HamburgerLine />
          </HamburgerButton>
        </Logo>
      )}
      <AppSelector render={render} collapsed={sidebarCollapsed} />
      {!sidebarCollapsed && (
        <SidebarFooter>
          <NewAppButton onClick={openNewAppModal}>+ New App</NewAppButton>
        </SidebarFooter>
      )}
    </SidebarContainer>
  )
}