import { openNewAppModal } from '../modals'
import {
  setCurrentView,
  setSelectedApp,
  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 goToDashboard = () => {
    setSelectedApp(null)
    setCurrentView('dashboard')
    render()
  }

  const toggleSidebar = () => {
    setSidebarCollapsed(!sidebarCollapsed)
    render()
  }

  return (
    <SidebarContainer style={sidebarCollapsed ? { width: 'auto' } : undefined}>
      <Logo>
        <LogoLink onClick={goToDashboard} title="Go to dashboard">
          {sidebarCollapsed ? '🐾' : '🐾 Toes'}
        </LogoLink>
        <HamburgerButton onClick={toggleSidebar} title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}>
          <HamburgerLine />
          <HamburgerLine />
          <HamburgerLine />
        </HamburgerButton>
      </Logo>
      <AppSelector render={render} collapsed={sidebarCollapsed} />
      {!sidebarCollapsed && (
        <SidebarFooter>
          <NewAppButton onClick={openNewAppModal}>+ New App</NewAppButton>
        </SidebarFooter>
      )}
    </SidebarContainer>
  )
}
