'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 variant="outline">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>Pas de couleurs</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>
        </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>
    )
  }