'use client'

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { IconUserFilled } from "@tabler/icons-react"

interface NavigationProps {
  isLoggedIn: boolean,
  username: string
}

export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
    return (
      <div className="flex flex-row p-4 gap-4 w-full fixed top-0 left-0 bg-slate-700 items-center justify-between">
        <div className="flex flex-row gap-4 items-center">
          <a href="/">Brawl Set</a>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button>Cartes</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56">
              <DropdownMenuGroup>
                <DropdownMenuItem>
                  <span>Top cartes</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <span>Terrains</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <span>Cartes salées</span>
                </DropdownMenuItem>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>Par couleurs</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <span>Blanc</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Bleu</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Noir</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Rouge</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Vert</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Incolor</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Multicolor</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>Par type</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <span>Créatures</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Éphémères</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Rituels</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Artefacts</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Équipements</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Artefacts de mana</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Artefacts utilitaires</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Enchantements</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Aura</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Planeswalker</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Terrains</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Terrains utilitaires</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Terrains ajusteurs</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuItem>
                  <span>Combos</span>
                </DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button>Commandant·es</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56">
              <DropdownMenuGroup>
                <DropdownMenuItem>
                  <span>Top commandant·es</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <span>Second plan</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <span>Partenaires</span>
                </DropdownMenuItem>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>Mono</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <span>Blanc</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Bleu</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Noir</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Rouge</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Vert</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>Incolor</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>2 couleurs</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <span>WU Azorius</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>UB Dimir</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>BR Rakdos</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>RG Gruul</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>GW Selesnya</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>WB Orzhov</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>UR Izzet</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>BG Golgari</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>RW Boros</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>GU Simic</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>3 couleurs</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <span>WUB Esper</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>UBR Grixis</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>BRG Jund</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>RGW Naya</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>GWU Bant</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>WBG Abzan</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>URW Jeskai</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>BGU Sultai</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>RWB Mardu</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>GUR Temur</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>4+ couleurs</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <span>WUBR Yore-Tiller</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>UBRG Glint-Eye</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>BRGW Dune-Brood</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>RGWU Ink-Treader</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>GWUB Witch-Maw</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <span>WBBRG 5 couleurs</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
          <a href="/rules"><Button>Règles</Button></a>
        </div>
        <div className="flex flex-row gap-4">
          <Input placeholder="Rechercher des cartes" />
          { !isLoggedIn && 
            <>
              <a href="/account/signin"><Button>Connexion</Button></a>
              <Button disabled={true}>Inscription</Button>
            </>
          }
          {
            isLoggedIn &&
            <a href="/account/profile" className="flex flex-row items-center gap-2">
              <IconUserFilled color="gray" />
              <span className="text-gray-400">{username}</span>
            </a>
          }
        </div>
      </div>
    )
  }