<script lang="ts">
import {Options, Vue} from 'vue-property-decorator';
import {BModal} from 'bootstrap-vue-next';
import type {ViewEntry} from '@/components/manga/MangaList.vue';
import {Modal} from 'bootstrap';
import {latestChaptersSorted, latestChapterString, newChapterCount} from './util.manga';

@Options({
  name: 'MangaEntryDetailsModal',
  components: {BModal},
})
export default class MangaEntryDetailsModal extends Vue {
  entry: ViewEntry | null = null;

  //functions
  latestChaptersSorted = latestChaptersSorted;
  latestChapterString = latestChapterString;
  newChapterCount = newChapterCount;

  open(entry: ViewEntry): void {
    this.entry = entry;
    new Modal(this.$refs.modal as Element).show();
  }

  dismiss(): void {
    this.entry = null;
    new Modal(this.$refs.modal as Element).hide();
  }
}
</script>

<template>
  <div ref="modal" class="modal manga-details-modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content" v-if="entry">
        <div class="modal-header">
          <div class="modal-title">
            <div class="mb-0">{{ entry.media?.title?.native }}</div>
            <div style="font-size: 0.5em">{{ entry.media?.title?.english ?? entry.media?.title?.romaji }}</div>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="d-flex flex-row">
            <img :src="entry.media?.coverImage.large as string" alt="cover-img" class="modal-cover"/>
            <div class="ms-1">

              <!--          <div>-->
              <!--            {{ $t('manga.title') + ': ' }}-->
              <!--            <span class="mb-0">{{ entry.media?.title?.native }}</span>-->
              <!--            <span style="font-size: 0.5em">{{ entry.media?.title?.english ?? entry.media?.title?.romaji }}</span>-->
              <!--          </div>-->

              <div>
                {{ $t('manga.score') + ':' }}
                <i class="fa fa-star" style="color: var(--bs-orange)"/>
                {{ entry.entry.score }}
              </div>

              <div>
                {{ $t('manga.progress') + ': ' + entry.entry.progress + '/' + latestChapterString(entry) }}
              </div>

              <div>
                {{ $t('manga.chapters.newCount') + ': ' + newChapterCount(entry) }}
              </div>

              <div v-if="entry.chapters.length">
                <div>{{ $t('manga.chapters.latest') + ': ' }}</div>
                <ul class="mb-0 ps-3">
                  <li v-for="c in latestChaptersSorted(entry)">
                    {{ c.chapter + ' (' + c.group + ')' }}
                  </li>
                </ul>
              </div>

              <div v-if="entry.relation">
                <span>
                  MangaUpdates:
                </span>
                <template v-if="entry.series">
                  <a :href="entry.series!.url" target="_blank">
                    {{ entry.series!.title }}
                  </a>
                  <!--                  <span class="ms-auto">-->
                  <!--                    {{ formatDateTimeSeconds(new Date(entry.series!.last_updated.as_rfc3339)) }}-->
                  <!--                  </span>-->
                </template>
                <span v-else>{{ $t('mangaupdates.relation.found') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/breakpoints';

@include media-breakpoint-down(sm) {
  .modal.manga-details-modal {
    --manga-cover-size: 3rem;
    font-size: 0.8em;
    --bs-modal-header-padding: 0.5rem;
    --bs-modal-padding: 0.5rem;
    --bs-modal-footer-padding: 0.5rem;
  }
}

@include media-breakpoint-up(sm) {
  .manga-details-modal {
    --manga-cover-size: 4rem;
  }
}

.manga-details-modal .modal-cover {
  max-width: var(--manga-cover-size);
  max-height: calc(var(--manga-cover-size) * 2);
  object-fit: cover;
  border-radius: calc(var(--manga-cover-size) / 16);
}
</style>