<script setup lang="ts">
import Modal from "@/components/Modal/Modal.vue";
import {useBaseStore} from "@/stores/base.ts";
import Ring from "@/components/Ring.vue";
import Tooltip from "@/components/Tooltip.vue";
import Fireworks from "@/components/Fireworks.vue";
import BaseButton from "@/components/BaseButton.vue";
import {DefaultDisplayStatistics, DisplayStatistics} from "@/types.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import {onMounted, reactive} from "vue";
import {cloneDeep} from "lodash-es";
import {Icon} from '@iconify/vue';
import {$computed, $ref} from "vue/macros";

const store = useBaseStore()
let statModalIsOpen = $ref(false)
let currentStat = reactive<DisplayStatistics>(cloneDeep(DefaultDisplayStatistics))

const emit = defineEmits([
  'repeat',
  'next',
  'write',
  'restart'
])

onMounted(() => {
  emitter.on(EventKey.openStatModal, (stat: DisplayStatistics) => {
    currentStat = {...DefaultDisplayStatistics, ...stat}
    statModalIsOpen = true
    store.saveStatistics(stat)
  })
})

let optionType = $ref('')

function options(emitType: 'write' | 'repeat' | 'next' | 'restart') {
  statModalIsOpen = false
  optionType = emitType
  emit(emitType)
}

const isEnd = $computed(() => {
  return store.isArticle ?
      store.currentDict.chapterIndex === store.currentDict.articles.length - 1 :
      store.currentDict.chapterIndex === store.currentDict.chapterWords.length - 1
})

function onClose() {
  if (!optionType) {
    options(isEnd ? 'restart' : 'next')
  }
  optionType = ''
}

</script>

<template>
  <Modal
      :header="false"
      v-model="statModalIsOpen"
      @close="onClose">
    <div class="statistics">
      <header>
        <div class="title">{{ store.currentDict.name }}</div>
      </header>
      <div class="content">
        <div class="rings">
          <Ring
              :value="currentStat.correctRate + '%'"
              desc="正确率"
              :percentage="currentStat.correctRate"/>
          <Ring
              :value="currentStat.wrongWordNumber"
              desc="错误数"
              :percentage="0"
          />
          <Ring
              :value="currentStat.total"
              desc="单词总数"
              :percentage="0"
              style="margin-bottom: 0;"/>
        </div>
        <div class="result">
          <div class="wrong-words-wrapper">
            <div class="wrong-words">
              <div class="word" v-for="i in currentStat.wrongWords">{{ i.name }}</div>
              <!--                          <div class="word" v-for="i in 100">{{ i }}</div>-->
            </div>
          </div>
          <div class="notice" v-if="!currentStat.wrongWords.length">
            <!--          <div class="notice">-->
            <Icon class="hvr-grow pointer" icon="flat-color-icons:like" width="20" color="#929596"/>
            表现不错，全对了！
          </div>
        </div>
        <div class="shares">
          <Tooltip title="分享给朋友">
            <Icon class="hvr-grow pointer" icon="ph:share-light" width="20" color="#929596"/>
          </Tooltip>
          <Tooltip title="请我喝杯咖啡">
            <Icon class="hvr-grow pointer" icon="twemoji:teacup-without-handle" width="20" color="#929596"/>
          </Tooltip>
        </div>
      </div>
      <div class="footer">
        <template v-if="isEnd">
          <BaseButton keyboard="Ctrl + Enter" @click="options('write')">
            默写本章
          </BaseButton>
          <BaseButton keyboard="Alt + Enter" @click="options('repeat')">
            重复本章
          </BaseButton>
          <BaseButton keyboard="Tab" @click="options('restart')">
            重新练习
          </BaseButton>
        </template>
        <template v-else>
          <BaseButton keyboard="Ctrl + Enter" @click="options('write')">
            默写本章
          </BaseButton>
          <BaseButton keyboard="Alt + Enter" @click="options('repeat')">
            重复本章
          </BaseButton>
          <BaseButton keyboard="Tab" @click="options('next')">
            下一章
          </BaseButton>
        </template>
      </div>
    </div>
  </Modal>
  <Fireworks v-if="statModalIsOpen"/>
</template>
<style scoped lang="scss">
@import "@/assets/css/style.scss";

.statistics {
  width: 800rem;
  padding: $space;
  background: $dark-second-bg;
  border-radius: $card-radius;

  $header-height: 40rem;
  $footer-height: 60rem;

  header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: $header-height;
    font-size: 24rem;
    margin-bottom: 15rem;
  }

  .content {
    display: flex;
    gap: $space;
    margin-bottom: 15rem;

    .result {
      box-sizing: border-box;
      overflow: hidden;
      height: 320rem;
      display: flex;
      flex-direction: column;
      border-radius: $card-radius;
      background: $item-hover;
      flex: 1;

      .wrong-words-wrapper {
        flex: 1;
        overflow: auto;
        padding: $space;
      }

      .wrong-words {
        box-sizing: border-box;
        display: flex;
        margin-right: 5rem;
        flex-wrap: wrap;
        gap: 10rem;
        align-items: flex-start;

        .word {
          display: inline-block;
          border-radius: 6rem;
          padding: 5rem 15rem;
          background: $dark-second-bg;
        }
      }

      .notice {
        background: $main;
        height: 40rem;
        display: flex;
        gap: 10rem;
        align-items: center;
        padding-left: $space;
      }
    }

    .shares {
      display: flex;
      flex-direction: column;
      gap: $space;
    }
  }

  .footer {
    height: $footer-height;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rem;
  }
}

</style>