<template>
  <nav class="navbar navbar-expand-md" style="margin-bottom: 1rem">
    <RouterLink class="navbar-brand nav-link" style="padding-left: 0;" 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"
      @click="setMobileNavBarState(!isMobileNavBarExpanded)">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </button>
    <div :class="['navbar-collapse', isMobileNavBarExpanded ? 'open-menu collapse show' : 'closed-menu collapse']"
      id="top-navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <RouterLink class="nav-link" to="/schedule">Schedule</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink class="nav-link" to="/standings">Standings</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink class="nav-link" to="/leaderboards">Leaders</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink class="nav-link" to="/teamleaderboards">Team Stats</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink class="nav-link"
            :to="{ name: 'team', params: { seasonNumber: seasonNumber(), teamAbbreviation: 'FA' } }">Free Agents
          </RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink class="nav-link" to="/transactions">Transactions</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink class="nav-link" :to="{ name: 'managers' }">
            Managers
          </RouterLink>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/rules">Rules Ref</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" target="_blank" href="https://sbanews.manticorum.com/">News</a>
        </li>
        <li class="nav-item">
          <button v-if="!isAuthenticated" id="login" class="nav-link" @click="authenticate">Login with Discord</button>
        </li>
        <li v-if="false" class="nav-item">
          <!-- make the above true if you want to clear cookies for testing -->
          <button class="nav-link" @click="clearCookie">Clear Cookie</button>
        </li>
        <li v-if="isAuthenticated && userTeam" class="nav-item">
          <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber(), teamAbbreviation: userTeam.abbrev } }">
            <img id="thumbnail" style="max-height: 35px; vertical-align: middle;" :src=userTeam?.thumbnail>
          </RouterLink>
        </li>
      </ul>

      <form class="form-inline" :style="isMobileNavBarExpanded ? 'padding-top: 5px' : 'margin-left: auto'"
        @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" :key="name" :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>
</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'
import type { Team } from '@/services/apiResponseTypes'
import { fetchActiveTeamByOwnerId } from '@/services/teamsService'
import { authenticate, clearCookie, completeAuthentication, getOwnerId, isDiscordAuthenticated } from '@/services/authenticationService'

export default {
  name: 'NavBar',
  components: {
    RouterLink
  },
  data() {
    return {
      isAuthenticated: false as boolean,
      userTeam: undefined as Team | undefined,
      players: [] as Player[],
      searchPlayerName: undefined,
      isMobileNavBarExpanded: false
    }
  },
  created() {
    this.populatePlayerNames()
    this.completeAuthentication()
    this.fetchUserTeam()
    this.setInitialMobileNavBarState()
  },
  mounted() {
    window.addEventListener('navbar-storage-changed', (event) => {
      this.isMobileNavBarExpanded = (<CustomEvent>event).detail.storage
    })
  },
  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' }
      ]
    },
    sortedPlayerNames(): string[] {
      return [...this.players].sort((p1, p2) => p2.wara - p1.wara).map(p => p.name)
    },
    ownerId(): string | undefined {
      return getOwnerId()
    }
  },
  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}` })
    },
    setMobileNavBarState(isExpanded: boolean): void {
      this.isMobileNavBarExpanded = isExpanded
      isExpanded ? sessionStorage.setItem('navbar', JSON.stringify(isExpanded)) : sessionStorage.clear()
    },
    setInitialMobileNavBarState(): void {
      const isExpanded = sessionStorage.getItem('navbar')
      this.isMobileNavBarExpanded = isExpanded !== null && JSON.stringify(isExpanded) == 'true'
    },
    authenticate(): void {
      authenticate()
    },
    async completeAuthentication(): Promise<void> {
      if (await isDiscordAuthenticated() || this.isAuthenticated) {
        this.isAuthenticated = true
        return
      }

      completeAuthentication()
    },
    async fetchUserTeam(): Promise<void> {
      if (!this.ownerId) return
      this.userTeam = await fetchActiveTeamByOwnerId(this.ownerId)
    },
    seasonNumber(): number {
      return CURRENT_SEASON
    },
    clearCookie(): void {
      clearCookie()
    }
  }
}
</script>

<style>
/* Nav bar hamburger icon */
.bar {
  width: 30px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transform: 0.25s;
}

.nav {
  margin: 0%;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.navbar {
  background-color: #a6ce39;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.32421875rem;
  padding-bottom: 0.32421875rem;
  margin-right: 1rem;
  font-size: 1.171875rem;
  line-height: inherit;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .nav {
    padding-top: 10px;
    position: absolute;
    width: 100%;
  }

  .open-menu {
    opacity: 1;
    height: 100%;
  }

  .closed-menu {
    opacity: 0;
    height: 0;
    padding: 0;
  }
}
</style>