<template>
    <div class="series-item" @click="detail">
        <IonThumbnail
            :style="{
                width: `${itemSize.width}px`,
                height: `${itemSize.height}px`,
            }"
        >
            <img
                :style="{
                    width: `${itemSize.width}px`,
                    height: `${itemSize.height}px`,
                }"
                v-if="series"
                class="rounded object-cover"
                :src="series.cover"
            />
            <ion-skeleton-text
                v-else
                class="rounded"
                :animated="true"
            ></ion-skeleton-text>
        </IonThumbnail>
        <div
            v-if="series"
            class="text-xs line-clamp-2 mt-1"
            :style="{ width: `${itemSize.width}px` }"
        >
            {{ series.title }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { IonThumbnail, IonSkeletonText, useIonRouter } from "@ionic/vue";
import { useWindowSize } from "@vueuse/core";
import { computed } from "vue";

const props = defineProps({
    series: Object,
    episode: Object,
    size: Object,
});
const { width, height } = useWindowSize();

const itemSize = computed(() => {
    let itemWidth, itemHeight;
    if (width.value < height.value) {
        itemWidth = Math.floor((width.value - 60) / 3);
        itemHeight = Math.floor((itemWidth * 16) / 9);
    } else {
        itemHeight = Math.floor((height.value - 60) / 2);
        itemWidth = Math.floor((itemHeight * 9) / 16);
    }
    return (
        props.size || {
            width: itemWidth,
            height: itemHeight,
        }
    );
});

const router = useIonRouter();
const detail = () => {
    console.log("detail");
    if (!props.series) return;
    router.push({
        path: `/series/${props.series.id}`,
    });
};
</script>
