<template>
  <nav class="navbar navbar-expand-sm navbar-dark bg-primary" style="margin-bottom: 1rem" id="navbar">
    <RouterLink class="nav-link" to="/">SBa Season {{ seasonNumber }}</RouterLink>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse"
      aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="top-navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <!-- TODO -->
          <RouterLink class="nav-link" to="/schedule">Schedule</RouterLink>
        </li>
        <li class="nav-item">
          <!-- TODO -->
          <RouterLink class="nav-link" to="/standings">Standings</RouterLink>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="statsDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Stats & Leaders</a>
          <ul class="dropdown-menu" aria-labelledby="statsDropdown">
            <li><a class="dropdown-item dropdown-toggle" href="#">Season Leaders</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/stats/leaders/season?stat=batting">Batting Leaders</a></li>
                <li><a class="dropdown-item" href="/stats/leaders/season?stat=pitching">Pitching Leaders</a></li>
                <li><a class="dropdown-item" href="/stats/leaders/season?stat=fielding">Fielding Leaders</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">Team Stats</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/stats/team?stat=batting">Team Batting</a></li>
                <li><a class="dropdown-item" href="/stats/team?stat=pitching">Team Pitching</a></li>
                <li><a class="dropdown-item" href="/stats/team?stat=fielding">Team Fielding</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">Single-Game Records</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/stats/leaders/single-game?stat=batting">Single-Game Batting</a></li>
                <li><a class="dropdown-item" href="/stats/leaders/single-game?stat=pitching">Single-Game Pitching</a></li>
                <li><a class="dropdown-item" href="/stats/leaders/single-game?stat=fielding">Single-Game Fielding</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">Single-Season Leaders</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/stats/leaders/single-season?stat=batting">Single-Season Batting</a>
                </li>
                <li><a class="dropdown-item" href="/stats/leaders/single-season?stat=pitching">Single-Season Pitching</a>
                </li>
                <li><a class="dropdown-item" href="/stats/leaders/single-season?stat=fielding">Single-Season Fielding</a>
                </li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">Career Leaders</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/stats/leaders/career?stat=batting">Career Batting</a></li>
                <li><a class="dropdown-item" href="/stats/leaders/career?stat=pitching">Career Pitching</a></li>
                <li><a class="dropdown-item" href="/stats/leaders/career?stat=fielding">Career Fielding</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="teamsDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Teams</a>
          <ul class="dropdown-menu" aria-labelledby="teamsDropdown">
            <li><a class="dropdown-item dropdown-toggle" href="#">AL East</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/teams?abbrev=NSH">Gators</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=HAM">Honeybees</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=TK">Kaiju</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=PHP">Phantoms</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">AL West</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/teams?abbrev=CHC">Cyclones</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=PEI">Mussels</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=WAI">Whale Sharks</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=SHA">Wu Xia</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">NL East</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/teams?abbrev=DAL">Drillers</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=CLS">Macho Men</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=KSS">Shoebills</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=DEN">Zephyr</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">NL West</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/teams?abbrev=VA">Angels</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=WV">Black Bears</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=MKE">Bovines</a></li>
                <li><a class="dropdown-item" href="/teams?abbrev=BSG">Snow Geese</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="transDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Transactions</a>
          <ul class="dropdown-menu" aria-labelledby="transDropdown">
            <li><a class="dropdown-item" href="/teams?abbrev=FA">Free Agents</a></li>
            <li><a class="dropdown-item" href="/transactions">Transactions</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="historyDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">History</a>
          <ul class="dropdown-menu" aria-labelledby="historyDropdown">
            <li><a class="dropdown-item" href="/awards">Awards</a></li>
            <li><a class="dropdown-item dropdown-toggle" href="#">Managers</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item dropdown-toggle" href="#">Active</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/managers?name=Basebally">Basebally</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Brian Taylor">BT</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Cal">Cal</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Cash">Cash</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Derek">Derek</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Foxx">Foxx</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Jack">Jack</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Joe">Joe</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Josef">Josef</a></li>
                    <li><a class="dropdown-item" href="/managers?name=JP">JP</a></li>
                    <li><a class="dropdown-item" href="/managers?name=JZ">JZ</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Kiger">Kiger</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Kilo">Kilo</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Kalin">Kalin</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Lyle">Lyle</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Mason">Mason</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Mcast">Mcast</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Paulie">Paulie</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Plack">Plack</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Reed">Reed</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Riles">Riles</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Ryan">Ryan</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Smitty">Smitty</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Will">Will</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item dropdown-toggle" href="#">Retired</a>
                  <ul class="dropdown-menu">

                    <li><a class="dropdown-item" href="/managers?name=Berna">Berna</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Boof">Boof</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Caleb">Caleb</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Diego">Diego</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Jingles">Jingles</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Jojo">Jojo</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Petra">Petra</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Triumph">Triumph</a></li>
                    <li><a class="dropdown-item" href="/managers?name=Val">Val</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a class="dropdown-item dropdown-toggle" href="#">Season Recaps</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/recaps?season=6">Season 6</a></li>
                <li><a class="dropdown-item" href="/recaps?season=5">Season 5</a></li>
                <li><a class="dropdown-item" href="/recaps?season=4">Season 4</a></li>
                <li><a class="dropdown-item" href="/recaps?season=3">Season 3</a></li>
                <li><a class="dropdown-item" href="/recaps?season=2">Season 2</a></li>
                <li><a class="dropdown-item" href="/recaps?season=1">Season 1</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/rules">Rules Ref</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/news">News</a>
        </li>
        <li class="nav-item">
          <a id="login" class="nav-link">Login with Discord</a>
        </li>
        <li class="nav-item">
          <!-- TODO RouterLink to team page with team icon -->
          <a id="team-login-link" href="/teams?abbrev="></a>
        </li>
      </ul>

      <form class="form-inline" @submit.stop.prevent="searchPlayers">
        <input type="text" name="name" placeholder="Player Search" list="player-names" v-model="searchPlayerName">
        <datalist id="player-names">
          <option v-for="name in sortedPlayerNames" :value="name">{{ name }}</option>
        </datalist>
      </form>

      <ul class="navbar-nav navbar-right">
        <li class="nav-item">
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="darkSwitch" />
            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
          </div>
          <!-- <script src="/static/dark-mode-switch.js"></script> -->
        </li>
      </ul>
    </div>
  </nav>

  <!-- <nav class="container">
    <RouterLink to="/">SBa Season {{ seasonNumber }}</RouterLink>
    <RouterLink to="/schedule">Schedule</RouterLink>
    <RouterLink to="/standings">Standings</RouterLink>
    <RouterLink to="/stats">Stats & Leaders</RouterLink>
    <RouterLink to="/teams">Teams</RouterLink>
    <RouterLink to="/transactions">Transactions</RouterLink>
    <RouterLink to="/history">History</RouterLink>
    <RouterLink to="/rules">Rules Ref</RouterLink>
    <RouterLink to="/news">News</RouterLink>
  </nav> -->
</template>

<script lang="ts">
import { RouterLink } from 'vue-router'
import type { MenuOption } from 'naive-ui'
import { fetchPlayers, type Player } from '@/services/playersService'
import { CURRENT_SEASON } from '@/services/utilities'

export default {
  name: 'NavBar',
  data() {
    return {
      players: [] as Player[],
      searchPlayerName: undefined
    }
  },
  created() {
    this.populatePlayerNames()
  },
  computed: {
    menuOptions(): MenuOption[] {
      return [
        {
          label: 'Schedule',
          key: 'Schedule'
        },
        {
          label: 'Standings',
          key: 'Standings',
        },
        {
          label: 'Stats & Leaders',
          key: 'Stats & Leaders',
          children: [
            {
              label: 'Season Leaders',
              key: 'Season Leaders',
              children: [
                {
                  label: 'Batting Leaders',
                  key: 'Batting Leaders'
                },
                {
                  label: 'Pitching Leaders',
                  key: 'Pitching Leaders'
                },
                {
                  label: 'Fielding Leaders',
                  key: 'Fielding Leaders'
                }
              ]
            },
            {
              label: 'Team Stats',
              key: 'Team Stats',
              children: [
                {
                  label: 'Team Batting',
                  key: 'Team Batting'
                },
                {
                  label: 'Team Pitching',
                  key: 'Team Pitching'
                },
                {
                  label: 'Team Fielding',
                  key: 'Team Fielding'
                }
              ]
            },
            {
              label: 'Single-Game Records',
              key: 'Single-Game Records',
              children: [
                {
                  label: 'Single-Game Batting',
                  key: 'Single-Game Batting'
                },
                {
                  label: 'Single-Game Pitching',
                  key: 'Single-Game Pitching'
                },
                {
                  label: 'Single-Game Fielding',
                  key: 'Single-Game Fielding'
                }
              ]
            },
            {
              label: 'Single-Season Stats',
              key: 'Single-Season Stats',
              children: [
                {
                  label: 'Single-Season Batting',
                  key: 'Single-Season Batting'
                },
                {
                  label: 'Single-Season Pitching',
                  key: 'Single-Season Pitching'
                },
                {
                  label: 'Single-Season Fielding',
                  key: 'Single-Season Fielding'
                }
              ]
            },
            {
              label: 'Career Leaders',
              key: 'Career Leaders',
              children: [
                {
                  label: 'Career Batting',
                  key: 'Career Batting'
                },
                {
                  label: 'Career Pitching',
                  key: 'Career Pitching'
                },
                {
                  label: 'Career Fielding',
                  key: 'Career Fielding'
                }
              ]
            }]
        },
        {
          label: 'Teams',
          key: 'Teams',
          children: [
            {
              label: 'AL East',
              key: 'AL East',
              children: [
                { label: 'Gators', key: 'Gators' },
                { label: 'Honeybees', keys: 'Honeybees' },
                { label: 'Kaiju', key: 'Kaiju' },
                { label: 'Phantoms', key: 'Phantoms' }
              ]
            },
            {
              label: 'AL West',
              key: 'AL West',
              children: [
                { label: 'Cyclones', key: 'Cyclones' },
                { label: 'Mussels', keys: 'Mussels' },
                { label: 'Whale Sharks', key: 'Whale Sharks' },
                { label: 'Wu Xia', key: 'Wu Xia' }
              ]
            },
            {
              label: 'NL East',
              key: 'NL East',
              children: [
                { label: 'Drillers', key: 'Drillers' },
                { label: 'Macho Men', keys: 'Macho Men' },
                { label: 'Shoebills', key: 'Shoebills' },
                { label: 'Zephyr', key: 'Zephyr' }
              ]
            },
            {
              label: 'NL West',
              key: 'NL West',
              children: [
                { label: 'Angels', key: 'Angels' },
                { label: 'Black Bears', keys: 'Black Bears' },
                { label: 'Bovines', key: 'Bovines' },
                { label: 'Snow Geese', key: 'Snow Geese' }
              ]
            }
          ]
        },
        {
          label: 'Transactions',
          key: 'Transactions',
          children: [
            { label: 'Free Agents', key: 'Free Agents' },
            { label: 'Transactions', key: 'Transactions' }
          ]
        },
        {
          label: 'History',
          key: 'History',
          children: [
            { label: 'Awards', key: 'Awards' },
            {
              label: 'Managers',
              key: 'Managers',
              // TODO figure out a way to pull active/retired into children here
              children: [{ label: 'Active', key: 'Active' }, { label: 'Retired', key: 'Retired' }]
            },
            {
              label: 'Season Recaps',
              key: 'Season Recaps',
              children: [
                { label: 'Season 4', key: 'Season 4' },
                { label: 'Season 3', key: 'Season 3' },
                { label: 'Season 2', key: 'Season 2' },
                { label: 'Season 1', key: 'Season 1' },
              ]
            }
          ]
        },
        { label: 'Rules Ref', key: 'Rules Ref' },
        { label: 'News', key: 'News' }
      ]
    },
    seasonNumber(): number {
      // TODO pull this from DB?
      return CURRENT_SEASON
    },
    sortedPlayerNames(): string[] {
      return this.players.sort((p1, p2) => p2.wara - p1.wara).map(p => p.name)
    }
  },
  methods: {
    async getPlayers(): Promise<Player[]> {
      return await fetchPlayers(this.seasonNumber)
    },
    async populatePlayerNames(): Promise<void> {
      this.players = await this.getPlayers()
    },
    searchPlayers(): void {
      this.$router.push({ path: `/players/${this.seasonNumber}/${this.searchPlayerName}` })
    }
  }
}
</script>

<style>
nav {
  margin: 0%;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}
</style>