<template>
  <section>
    <header class="results-header">
      <h1>{{ $t('results.headline') }}</h1>
    </header>

    <div class="results-content">
      <p>{{ $t('results.entry') }}</p>
      <span>{{ $t('results.hint') }}</span>
    </div>

    <ul class="party-results">
      <li v-for="party of parties" :key="party.token">
        <router-link :to="{ path: getPartyPath(party.id) }">
          <div class="result-party-info">
            <div class="result-party-logo">
              <span>{{ party.token }}</span>
            </div>

            <h2>{{ getScorePercentage(party.score) }}%</h2>
          </div>

          <feather-zoom-in class="results-see-more" />

          <v-progress
            class="result-percentage"
            :value="party.score"
            :max="totalMaxPoints"
          />
        </router-link>

        <div class="party-results-national">
          <span>
            {{ party.name }}
          </span>
        </div>
      </li>
    </ul>

    <div v-if="!isEmbedded" class="results-ctrls">
      <p>{{ $t('results.thanks') }}</p>
      <router-link tag="a"
        class="btn"
        :to="{ path: `/${$i18n.locale}/` }"
      >
        {{ $t('results.indexBtn') }}
      </router-link>
      <router-link
        tag="a"
        class="btn btn-dark btn-small"
        :to="{ path: startOverUrl }"
      >
        {{ $t('results.startoverBtn') }}
        <feather-rotate-cw />
      </router-link>
    </div>
  </section>
</template>

<script>
  import { getTranslatedUrl } from '@/i18n/helper'
  import { getPartiesWithScores, getTotalMaxPoints } from '@/app/euromat/scoring'
  import {
    apolloPersonsForResultsQuery,
    apolloPersonsForResultsUpdate
  } from '@/app/euromat/graphqlQueries'

  export default {
    name: 'Results',

    components: {
      'feather-zoom-in': () =>
        import('vue-feather-icons/icons/ZoomInIcon' /* webpackChunkName: "icons" */),
      'feather-rotate-cw': () =>
        import('vue-feather-icons/icons/RotateCwIcon' /* webpackChunkName: "icons" */)
    },

    data () {
      return {
        scoringGrid: [],
        scores: [],
        parties: [],
        totalMaxPoints: 0
      }
    },

    computed: {
      startOverUrl () {
        return getTranslatedUrl('theses')
      },
      isEmbedded () {
        return (
          this.$route.query.embedded &&
          this.$route.query.embedded === 'iframe'
        )
      }
    },

    async created () {
      let emphasized
      let answers

      if (this.$browser.supports('sessionStorage')) {
        emphasized = JSON.parse(sessionStorage.getItem('euromat-emphasized'))
        answers = JSON.parse(sessionStorage.getItem('euromat-answers'))
      } else {
        emphasized = JSON.parse(this.$root.$data.backupStorage.emphasized)
        answers = JSON.parse(this.$root.$data.backupStorage.answers)
      }

      if (!emphasized) {
        await this.$router.push({ path: getTranslatedUrl('theses') })
      }

      const apolloResponse = await this.$apollo.query({ query: apolloPersonsForResultsQuery })
      const parties = apolloPersonsForResultsUpdate(apolloResponse.data)

      const partiesWithScores = getPartiesWithScores(answers, emphasized, parties)
      this.parties = partiesWithScores.map(party => ({
        id: party.id,
        token: party.token,
        score: party.score,
        name: party.name
      }))
        .sort((a, b) => a.score - b.score)
        .reverse()
      this.totalMaxPoints = getTotalMaxPoints(answers, emphasized)
    },

    methods: {
      getPartyPath (partyId) {
        return `${getTranslatedUrl('party')}/${partyId}`
      },
      getScorePercentage (score) {
        return (score / this.totalMaxPoints * 100).toFixed(2)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/animations";
  @import "~@/styles/colors";
  @import "~@/styles/layout";

  $result-bar-length: 92%;

  section {
    width: 95%;
    margin: 0 auto;
  }

  .results-header {
    margin-bottom: $base-gap;

    h1 {
      margin-bottom: $small-gap;
    }
  }

  .results-content {
    margin-bottom: $base-gap;

    span {
      margin-top: $small-gap;
      color: $text-color-secondary;
      font-size: $font-size-small;
    }
  }

  .party-results {
    list-style: none;
    width: 100%;
    counter-reset: result;

    li {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-bottom: $base-gap;
      position: relative;

      &:hover .results-see-more {
        opacity: 1;
      }

      &::before {
        counter-increment: result;
        content: counter(result) ".";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        color: $text-color-secondary;
        font-size: $font-size-xlarge;
        font-weight: 600;
      }

      @media (max-width: 650px) {
        &::before {
          display: none;
        }
      }
    }

    a:not(.party-results-national-logo) {
      height: 80px;
      width: $result-bar-length;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      @media (max-width: 650px) {
        width: 100%;
      }
    }

    h2,
    .results-see-more {
      position: relative;
      z-index: 1;
    }

    h2 {
      color: $text-color-base;
      font-weight: 600;
      text-shadow: $text-shadow;

      span {
        font-weight: 400;
      }
    }

    .results-see-more {
      stroke: $text-color-base;
      filter: drop-shadow($text-shadow);
      height: 32px;
      width: 32px;
      opacity: 0;
      transition: opacity 150ms $easeOutBack;
      margin-right: $base-gap;
    }

    .result-percentage {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .party-results-national {
    width: $result-bar-length;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: calc(#{$small-gap} / 2);
    padding-left: $small-gap;

    svg {
      margin-right: calc(#{$small-gap} / 2);
    }

    > span {
      display: inline-flex;
      align-items: center;
    }

    .party-results-national-logo {
      display: inline-block;
      font-weight: 700;
      margin-left: calc(#{$small-gap} / 2);

      > div {
        width: 70px;
        height: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
      }

      img {
        object-fit: contain;
        width: 80%;
      }
    }

    @media (max-width: 650px) {
      width: 100%;
    }
  }

  .result-party-info {
    display: flex;
    height: calc(100% - 4px);
    align-items: center;
    justify-content: center;

    .result-party-logo {
      margin-right: $small-gap;
      position: relative;
      z-index: 1;
      background: $background-secondary;
      border-radius: $border-radius;
      width: 80px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 2px;

      img {
        object-fit: contain;
      }

      span {
        color: $text-color-invert;
        font-weight: 700;
      }
    }
  }

  .results-ctrls {
    margin-top: $base-gap * 2;
    border-top: 4px solid $transparent-white;
    padding-top: $small-gap;

    p {
      margin-bottom: $small-gap;
    }

    a:first-of-type {
      margin-right: $small-gap;
    }
  }

  .results-affiliation {
    background: $medium-blue;
    width: 100%;
    margin-top: $base-gap * 2;
    padding: calc(#{$small-gap} / 2);
    border-radius: calc(#{$border-radius} / 3);

    @media (max-width: 650px) {
      padding: 0;
      margin-top: $base-gap * 2;
      border-top: 4px solid $transparent-white;
      padding-top: $small-gap;
      border-radius: 0;
      background: transparent;
    }

    a {
      display: block;
    }

    img {
      width: 100%;
      height: auto;
      vertical-align: middle;
    }
  }
</style>
