import { useAuth } from '@context-providers/auth-context-provider'
import { useHeader } from '@context-providers/header-context-provider'
import { ColorMode } from '@context-providers/theme-context-provider'
import { PersonIcon } from '@radix-ui/react-icons'

import { PanelRightIcon } from 'lucide-react'
import { toast } from 'sonner'

import { ColorModeToggle } from '@components/ui/color-mode-toggle/color-mode-toggle'
import { APP_CONFIG } from '@lib/config'
import { Button, SidebarTrigger, useSidebarTabs } from '@postxl/ui-components'

export const ApplicationHeader = () => {
  const { tabs: sidebarTabs } = useSidebarTabs()
  const { title } = useHeader()
  const { logout } = useAuth()

  const hasLeftTabs = sidebarTabs['left']?.length > 0
  const hasRightTabs = sidebarTabs['right']?.length > 0

  const onToggleTheme = (nextMode: ColorMode) => {
    toast.info("As you may see now it's " + nextMode + ' color mode')
  }

  return (
    <div className="flex justify-between items-center p-2 border-b border-(--discreet-border) bg-sidebar dark:bg-sidebar">
      <h1>{title ?? 'Dashboard'}</h1>
      <div className="flex items-center gap-4">
        <ColorModeToggle key="btn-color-mode" onClick={onToggleTheme} __e2e_test_id__="button-toggle-theme" />
        {APP_CONFIG.AUTH && (
          <Button key="btn-logout" onClick={() => logout()}>
            <PersonIcon /> Logout
          </Button>
        )}
        {hasLeftTabs && <SidebarTrigger side="left" />}
        {hasRightTabs && (
          <SidebarTrigger side="right">
            <PanelRightIcon />
          </SidebarTrigger>
        )}
      </div>
    </div>
  )
}
