---
import { Image, Picture } from 'astro:assets'
import * as m from '../paraglide/messages.js'

import logo from 'img/logos/winter.png'
import logoEs from 'img/logos/default_es.png'

import Dropdown from './header/Dropdown.astro'
import DropdownItem from './header/DropdownItem.astro'
import Toggler from './header/Toggler.astro'
import NavButton from './header/NavButton.astro'
import LoginNav from './header/LoginNav.astro'
import prismaClient from 'utils/prisma-client.js'
import { Icon } from 'astro-icon/components'
import SearchBar from './search/SearchBar.astro'

const { value: bannerId } = (await prismaClient.config.findUnique({ where: { name: 'banner' } })) ?? {}
const { value: bannerPosition } = (await prismaClient.config.findUnique({ where: { name: 'banner-position' } })) ?? {}
const { session } = Astro.locals
---

<header class='relative'>
  <div class='relative h-[150px] bg-top bg-no-repeat bg-cover justify-center'>
    <div class='absolute size-full'>
      <Picture
        class={`size-full object-cover object-${bannerPosition || 'top'}`}
        src={`https://cdn.sittingonclouds.net/live/${bannerId}.png`}
        alt=''
        width={2560}
        height={150}
      />
    </div>
    <div class='relative md:px-20 size-full flex justify-center'>
      <a href='/'>
        <Image
          src={Astro.currentLocale === 'es' ? logoEs : logo}
          class='h-full md:py-0.5 w-auto'
          alt='logo'
          height={150}
          width={265}
        />
      </a>

      <LoginNav />
    </div>
  </div>
  <div class='relative w-full md:h-[55px] bg-dark z-40'>
    <Toggler>
      <a href='/'><NavButton>{m.home()}</NavButton></a>
      <a href='/last-added'><NavButton>{m.lastaddednav()}</NavButton></a>
      <a href='/album/list'><NavButton>{m.albumlist()}</NavButton></a>

      <Dropdown>
        {m.games()}
        <Fragment slot='items'>
          <DropdownItem href='/game'>{m.albums()}</DropdownItem>
          <DropdownItem href='/series'>{m.series()}</DropdownItem>
          <DropdownItem href='/publisher/list'>{m.publishers()}</DropdownItem>
          <DropdownItem href='/platforms/list'>{m.platforms()}</DropdownItem>
          <DropdownItem href='/game/list'>{m.gamelist()}</DropdownItem>
        </Fragment>
      </Dropdown>

      <Dropdown>
        {m.animation()}
        <Fragment slot='items'>
          <DropdownItem href='/anim'>{m.albums()}</DropdownItem>
          <DropdownItem href='/anim/list'>{m.animationlist()}</DropdownItem>
          <DropdownItem href='/studio/list'>{m.studios()}</DropdownItem>
        </Fragment>
      </Dropdown>

      {
        session ? (
          <>
            <a href='/requests'>
              <NavButton>{m.requests()}</NavButton>
            </a>
            <NavButton>{m.submitalbum()}</NavButton>
            <Dropdown>
              {m.adminGrounds()}
              <Fragment slot='items'>
                <DropdownItem href='/admin' perms>
                  {m.manageAlbums()}
                </DropdownItem>
                <DropdownItem href='/admin/user' perms>
                  {m.manageUsers()}
                </DropdownItem>
                <DropdownItem href='/admin/request' perms>
                  {m.manageRequests()}
                </DropdownItem>
                <DropdownItem href='/admin/submission' perms>
                  {m.manageSubmissions()}
                </DropdownItem>
              </Fragment>
            </Dropdown>
          </>
        ) : null
      }

      <SearchBar />
    </Toggler>
  </div>
</header>