'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"
import { Black, Blue, Green, White, Red, Colorless } from "@/components/ui/mana-icons"

interface NavigationProps {
  isLoggedIn: boolean,
  username: string
}

export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
    return (
      <div className="flex z-50 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 className="flex flex-row gap-2 items-center" href="/">
            <img src="/assets/logo.png" className="h-8" />
            <span className="font-beleren text-3xl mt-2">BRAWL SET</span>
          </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>
                        <a className="flex flex-row gap-2" href="/top/white">
                          <White className="h-4 w-4"/>
                          <span>Blanc</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2" href="/top/blue">
                          <Blue className="h-4 w-4"/>
                          <span>Bleu</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2" href="/top/black">
                          <Black className="h-4 w-4"/>
                          <span>Noir</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2" href="/top/red">
                          <Red className="h-4 w-4"/>
                          <span>Rouge</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2" href="/top/green">
                          <Green className="h-4 w-4"/>
                          <span>Vert</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2" href="/top/colorless">
                          <Colorless className="h-4 w-4"/>
                          <span>Incolor</span>
                        </a>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <a className="flex flex-row gap-2" href="/top/multicolor">
                          <span>Multicolor</span>
                        </a>
                      </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>
                        <White className="h-4 w-4"/>
                        <span>Blanc</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Blue className="h-4 w-4"/>
                        <span>Bleu</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Black className="h-4 w-4"/>
                        <span>Noir</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Red className="h-4 w-4"/>
                        <span>Rouge</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Green className="h-4 w-4"/>
                        <span>Vert</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Colorless className="h-4 w-4"/>
                        <span>Incolor</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>2 couleurs</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <span>Azorius</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Blue className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <span>Dimir</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Black className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <span>Rakdos</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Red className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <span>Gruul</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Green className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <span>Selesnya</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <White className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <span>Orzhov</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Blue className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <span>Izzet</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Black className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <span>Golgari</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Red className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <span>Boros</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Green className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <span>Simic</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>3 couleurs</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <span>Esper</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Blue className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <span>Grixis</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Black className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <span>Jund</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Red className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <span>Naya</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Green className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <span>Bant</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <span>Abzan</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Blue className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <span>Jeskai</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Black className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <span>Sultai</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Red className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <span>Mardu</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Green className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <span>Temur</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                </DropdownMenuSub>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <span>4+ couleurs</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <span>Yore-Tiller</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Blue className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <span>Glint-Eye</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Black className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <span>Dune-Brood</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Red className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <span>Ink-Treader</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Green className="h-4 w-4"/>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <span>Witch-Maw</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <White className="h-4 w-4"/>
                        <Blue className="h-4 w-4"/>
                        <Black className="h-4 w-4"/>
                        <Red className="h-4 w-4"/>
                        <Green className="h-4 w-4"/>
                        <span>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/decks" className="flex flex-row items-center gap-2"><span className="text-gray-400">Decks</span></a>
              <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>
    )
  }