<template>
  <section class="book-details">
    <q-card flat>
      <q-responsive :ratio="1">
        <div class="cover">
          <img :src="coverUrl" />
        </div>
      </q-responsive>

      <div class="absolute-right more">
        <q-btn icon="more_horiz" flat v-if="source !== 'book-add'">
          <book-context-menu :data="data"
                             @edit="onEdit"
                             @close="onClose"
                             @upload="onUpload"
                             v-if="source === 'book-list'" />
          <book-collection-context-menu :data="data"
                                        @edit="onEdit"
                                        @close="onClose"
                                        v-else-if="source === 'book-collection-list'" />
        </q-btn>
      </div>
    </q-card>

    <q-card class="meta-card" flat>
      <q-card-section class="meta">
        <header class="title">{{data.title}}</header>
        <o-view-item :label="$t('book.author')"
                     :value="data.author" align="right" lines="2" />
        <o-view-item :label="$t('book.publisher')"
                     :value="data.publisher" align="right" v-if="data.publisher" />
        <o-view-item :label="$t('book.published')"
                     :value="data.published.substring(0, 4)" align="right" v-if="data.published" />
        <template v-if="data.extension">
          <o-view-item :label="$t('book.format')" align="right">
            <template #value>
              <div class="row col-12 justify-end pi-btn-flat"
                   @click="onOpenPath"
                   v-if="ipcProvider === 'electron' && appMode === 'standalone'">
                <div>
                  {{ data.extension.toUpperCase() }}
                  <o-tooltip position="left" transition>
                    {{ $t('book.viewFiles') }}
                  </o-tooltip>
                </div>
              </div>
              <span v-else>
                {{ data.extension.toUpperCase() }}
              </span>
            </template>
          </o-view-item>
        </template>
        <template v-if="add">
          <o-view-item :label="$t('book.uploadTime')"
                       :value="timeMulti(data.createTime).timestamp()" align="right" />
        </template>
        <template v-else>
          <o-view-item :label="$t('book.addTime')"
                       :value="timeMulti(data.createTime).timestamp()" align="right" />
          <o-view-item :label="$t('book.lastReadTime')"
                       :value="timeMulti(data.updateTime).timestamp()" align="right" />
        </template>

        <section class="description" v-if="data.description">
          <span class="text-readable">{{ $t('description') }}</span>
          <q-scroll-area>
            <div v-html="data.description"></div>
          </q-scroll-area>
        </section>
      </q-card-section>

      <q-card-section class="row col-12 justify-center">
        <q-btn icon="add"
               :label="$t('add')"
               class="bg-primary text-white action"
               flat
               @click="emit('add')" v-if="add" />
        <q-btn icon="menu_book"
               :label="$t('book.startReading')"
               class="bg-primary text-white action"
               flat
               @click="openBook(data)" v-else />
      </q-card-section>
    </q-card>
  </section>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { timeMulti } from 'core/utils/dayjs'
import useApi from 'src/hooks/useApi'
import BookContextMenu from 'pages/console/book/book/BookContextMenu.vue'
import BookCollectionContextMenu from 'pages/console/book/collection/BookCollectionContextMenu.vue'
import useReading from 'src/hooks/useReading'
import { ipcProvider, ipcService } from 'src/api/ipc'

const props = defineProps({
  data: {
    type: Object,
    default: function () {
      return {}
    }
  },
  add: {
    type: Boolean,
    default: false
  },
  source: {
    type: String,
    default: 'book-list'
  },
})
const emit = defineEmits(['add', 'close', 'edit', 'upload'])

const { appMode, getCoverUrl } = useApi()
const { openBook } = useReading()
const coverUrl = ref('')

function onEdit() {
  emit('edit', props.data)
}

function onUpload() {
  emit('upload', props.data)
}

function onClose(args: Indexable) {
  emit('close', args)
}

function init() {
  coverUrl.value = getCoverUrl(props.data)
}

function onOpenPath() {
  ipcService.openPath(props.data.path)
}

onMounted(() => {
  init()
})

</script>

<style lang="scss">
.book-details {
  width: 100%;
  height: 100%;

  .more {
    padding: 4px;
    .q-btn {
      width: 36px;
      height: 36px;
    }
  }

  .q-responsive {
    max-height: 400px;
  }

  .cover {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 1rem;

    img {
      height: 100%;
      border-radius: 4px;
    }
  }

  .meta {
    .title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 10px;
      display: inline-flex;
    }
    .o-view-item {
      min-height: unset;
      padding: 4px 0;
    }

    .description {
      margin-top: 4px;
      .q-scrollarea {
        height: 160px;
      }
    }
  }

  .action {
    padding: 12px 40px;
  }
}
</style>
