<script setup lang="ts">
import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'

defineProps<{
  championName?: string
  championLanes?: Array<LaneData>
  tierlistList?: boolean
}>()
const emit = defineEmits<{
  stateChange: [state: string, lane: number]
}>()

const state = ref('runes')
const laneState = ref(0)

function handleStateChange(newState: string, newLane: number) {
  state.value = newState
  laneState.value = newLane
  emit('stateChange', newState, newLane)
}

const route = useRoute()
const selected = ref('')
if (route.path.startsWith('/tierlist/')) {
  const lane = route.params.lane as string
  selected.value = lane
}
</script>

<template>
  <div class="navbar-container">
    <NuxtLink
      style="
        display: flex;
        width: fit-content;
        text-decoration: none;
        align-items: center;
        margin-left: 10px;
      "
      to="/"
      prefetch
    >
      <NuxtImg
        id="navbar-logo-img"
        format="webp"
        src="/buildpath-high-resolution-logo-transparent.png"
      />
    </NuxtLink>

    <div
      v-for="(lane, i) in championLanes"
      :key="i"
      style="display: flex; align-items: center; margin-left: 20px"
    >
      <NuxtImg
        format="webp"
        width="40"
        height="40"
        :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
      />
      <div>
        <h2
          :class="
            'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')
          "
          @click="handleStateChange('runes', i)"
        >
          Runes
        </h2>
        <h2
          :class="
            'navbar-link ' + (state == 'items' && laneState == i ? 'navbar-link-selected' : '')
          "
          @click="handleStateChange('items', i)"
        >
          Items
        </h2>
      </div>
    </div>

    <div v-if="tierlistList == true" style="padding-left: 20px">
      <h2 style="padding-left: 0px; font-size: 1.4rem; margin-top: 15px">Tierlist</h2>
      <div style="display: flex">
        <NuxtLink
          v-for="(pos, i) in POSITIONS"
          :key="i"
          style="margin-top: 5px; margin-bottom: 5px"
          :to="'/tierlist/' + pos"
        >
          <div
            :class="selected == pos ? 'navbar-link-selected' : ''"
            class="navbar-link"
            style="display: flex; align-items: center"
          >
            <NuxtImg
              format="webp"
              width="30"
              height="30"
              :src="LANE_IMAGES[i]"
              :alt="POSITIONS_STR[i]"
            />
          </div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style>
.navbar-container {
  display: flex;

  position: fixed;
  bottom: 0;
  z-index: 10;

  background-color: #2b2826;
  width: 100%;
  height: 100px;

  margin: 0px;
}
.navbar-link {
  user-select: none;
  margin: 5px;
  padding: 5px;
  border-radius: 8px;
}
.navbar-link:hover {
  cursor: pointer;
  background-color: var(--color-surface-darker);
}
.navbar-link-selected {
  background-color: var(--color-surface);
}
#navbar-logo-img {
  height: 70px;
  width: fit-content;
  max-width: 55px;
}

@media only screen and (min-width: 1200px) {
  .navbar-container {
    display: none;
  }
}
</style>
