<!-- Svelte 4.2.11 -->

<script lang="ts">
  import { slide } from "svelte/transition";
  import { DATA_HOST } from "../libs/config";
  import { t } from "../libs/i18n";
  import { type GameName, getMult, roundFloor } from "../libs/scoring";
  import { coverNotFound } from "../libs/ui";
  import type { MusicMeta } from "../libs/generalTypes";
  import { tooltip } from "../libs/ui";
  import useLocalStorage from "../libs/hooks/useLocalStorage.svelte";

  export let g: string
  export let meta: MusicMeta
  export let game: GameName

  let mapData = g.split(":").map(Number)
  let mult = getMult(mapData[3], game)
  let mapRank: number | undefined = meta?.notes?.[mapData[1] === 10 ? 0 : mapData[1]]?.lv
  const rounding = useLocalStorage("rounding", true);

  console.log(rounding.value)

  let gameIndexMap = {
  'mai2': 3,
  'ongeki': 2,
  'chu3': 2
  };

  let gameIndex = gameIndexMap[game as keyof typeof gameIndexMap];
  </script>

<div class="map-detail-container" transition:slide>
  <div class="scores">
    <div>
      <img src={`${DATA_HOST}/d/${game}/music/00${mapData[0].toString().padStart(6, '0').substring(2)}.png`} alt="" on:error={coverNotFound} />
      <div class="info">
        <div class="first-line">
          <div class="song-title">{meta?.name ?? t("UserHome.UnknownSong")}</div>
          <span class={`lv level-${mapData[1] === 10 ? 3 : mapData[1]}`}>
            { mapRank ?? '-' }
          </span>
        </div>
        <div class="second-line">
          <span class={`rank-${getMult(mapData[gameIndex], game)[2].toString()[0]}`}>

            <span class="rank-text">{("" + getMult(mapData[gameIndex], game)[2]).replace("p", "+")}</span>
            <span class="rank-num" use:tooltip={(mapData[gameIndex] / 10000).toFixed(4)}>
              {
                rounding.value ?
                  roundFloor(mapData[gameIndex], game, 1) :
                  (mapData[gameIndex] / 10000).toFixed(4)
              }%
            </span>
          </span>
          {#if game === 'mai2'}
            <span class="dx-change">
              { mapRank ? Math.floor(mapRank * mult[1] * (Math.min(100.5, mapData[3] / 10000) / 100)) : '-' }
            </span>
          {/if}
        </div>
      </div>
    </div>
  </div>
</div>

<style lang="sass">

  @import "../vars"
  $gap: 20px

  .map-detail-container
    background-color: rgb(35,35,35)
    border-radius: $border-radius
    overflow: hidden

    .scores
      display: flex
      flex-direction: column
      flex-wrap: wrap
      gap: $gap

      // Image and song info
      > div
        display: flex
        align-items: center
        gap: 12px
        max-width: 100%
        box-sizing: border-box

        img
          width: 50px
          height: 50px
          border-radius: $border-radius
          object-fit: cover

        // Song info and score
        > div.info
          flex: 1
          display: flex
          justify-content: space-between
          overflow: hidden
          flex-direction: column

          .first-line
            display: flex
            flex-direction: row

          // Limit song name to one line
          .song-title
            flex: 1
            min-width: 0
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap

          // Make song score and rank not wrap
          > div:last-child
            white-space: nowrap

          @media (max-width: $w-mobile)
            flex-direction: column
            gap: 0

            .rank-text
              text-align: left

        .rank-S
          // Gold green gradient on text
          background: $grad-special
          -webkit-background-clip: text
          color: transparent

        .rank-A
          color: #ff8a8a

        .rank-B
          color: #6ba6ff

        .lv
          width: 30px
          text-align: center
          background: rgba(var(--lv-color), 0.6)
          padding: 0 6px
          border-radius: 0 $border-radius 0 $border-radius

          // Inset shadow, like it's a paper below this card with a cut
          box-shadow: inset 0 0 10px rgba(0,0,0,0.5)

        span
          display: inline-block
          text-align: left

        .second-line
          display: flex
          justify-content: space-between
          align-items: center

        // Vertical table-like alignment
        span.rank-text
          min-width: 40px
        span.rank-num
          min-width: 60px
        span.dx-change
          margin-right: 0.5rem
          color: $c-good
</style>
