<script setup lang="ts">
import { computed, ref } from 'vue'
import { Platform } from '@/enums'
import type { Game } from '@/types'

interface Props {
  data: Game[]
}

const props = defineProps<Props>()

const model = ref('NES')

const filterByPlatform = ({ platform }: { platform: Platform }) =>
  platform === Platform[model.value as keyof typeof Platform]
const sortByTitle = (a: Game, b: Game) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0)

const filteredData = computed(() => props.data.filter(filterByPlatform).sort(sortByTitle))
</script>

<template>
  <div class="filter-list">
    <div class="filter-list__head">
      <label class="filter-list__label" for="filter-list">Platform:</label>
      <select class="filter-list__dropdown" name="platform" id="filter-list" v-model="model">
        <option v-for="(plat, idx) in Platform" :key="idx" :value="idx">
          {{ plat }}
        </option>
      </select>
    </div>
    <ul class="filter-list__body" ref="gameList">
      <li class="filter-list__item" v-for="(game, idx) in filteredData" :key="idx">
        <a class="filter-list__link" :href="game.link.href" target="_blank">
          {{ game.title }}
        </a>
      </li>
    </ul>
  </div>
</template>

<style lang="scss">
.filter-list {
  display: flex;
  flex-flow: column nowrap;

  border: 0.125em solid var(--clr-page-black-light);
  border-radius: 1em;
  background-image: linear-gradient(
    to bottom right,
    var(--clr-page-black-light-clear) 0,
    var(--clr-page-black-clear) 100%
  );
  transition: all 0.3s linear;

  &__head {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.5em;
    border-bottom: 0.125em solid var(--clr-page-black-light);
    padding: 1em;
  }

  &__label,
  &__dropdown {
    flex: 0 0 auto;
  }

  &__dropdown {
    flex: 1 1 auto;
    max-width: 100%;

    background-color: var(--clr-page-black);

    font-size: 1em;
    color: #fff;

    border: 0.125em solid var(--clr-page-black-light);
    border-radius: 0.5em;
    padding: 0.5em 0.75em;

    transition: background-color 0.2s linear;
  }

  &__body {
    height: 17em;
    margin: 1em;
    padding: 0;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    &--placeholder {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }
  }

  &__item {
    list-style: '🎮️';
    margin: 0 0 0 1.25em;
    padding: 0 0 0 0.5em;
    scroll-snap-align: end;
  }

  &__link {
    display: inline flex;
    text-decoration: none;
    transition: all 0.3s linear;

    @media (hover: hover) {
      &:hover {
        color: var(--clr-sebin-yellow);
        text-shadow: 0 0 0.5em var(--clr-sebin-yellow);
      }
    }
  }

  &__placeholder {
    text-align: center;
    font-size: 1.5em;
  }

  &__pagination {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5em;

    margin: 0 0 1em 0;
    padding: 0;

    list-style: none;

    li {
      flex: 0 0 1.5em;
      width: 1.5em;
      height: 1.5em;
      background-color: var(--clr-page-black);
      border: 0.125em solid var(--clr-page-black);
      border-radius: 10em;
      text-align: center;
      transition: all 0.1s linear;
      line-height: 1.25;

      @media (hover: hover) {
        &:hover {
          cursor: pointer;
          border: 0.125em solid var(--clr-page-black-light);
        }
      }

      &.active {
        background-color: var(--clr-page-black-light);
        border: 0.125em solid var(--clr-page-black-light);
      }
    }
  }
}
</style>
