<template>
    <ion-page>
        <ion-content :fullscreen="true">
            <div>
                <div class="top mt-4 px-4">
                    <div class="flex items-center">
                        <div class="text-xl font-bold flex-1" @click="clickMe">
                            Me
                        </div>
                        <div class="flex p-2">
                            <IonIcon
                                :icon="settingsOutline"
                                class="text-2xl -mr-2"
                                @click="router.push('/settings')"
                            />
                        </div>
                    </div>
                    <div class="mt-4 flex items-center">
                        <img
                            :src="user?.avatar || IconAvatar"
                            class="w-[64px] h-[64px] rounded-full object-cover"
                            @click="profile"
                        />
                        <div class="ml-4 flex-1">
                            <div class="text-lg">{{ user?.username }}</div>
                            <div
                                v-if="membership.purchase"
                                class="text-sm text-prim text-opacity-80"
                            >
                                {{
                                    membership.expired
                                        ? `Expired at ${membership.expireAt}`
                                        : `Unlimited before ${membership.expireAt}`
                                }}
                            </div>
                            <div
                                v-else-if="!user || user.visitor"
                                class="mt-1 text-sm text-neutral-500"
                            >
                                VISITOR
                            </div>
                        </div>
                        <div
                            v-if="!user || user.visitor"
                            class="py-1 px-2 text-sm border border-neutral-500 rounded-md"
                            @click="router.push('/login')"
                        >
                            Sign in
                        </div>
                    </div>
                </div>
                <div class="px-4">
                    <div
                        class="h-[64px] bg-cover text-sm rounded-xl mt-8 flex items-center px-4"
                        :style="{ backgroundImage: `url(${bgInviteCell})` }"
                    >
                        <div class="flex-1 leading-none">
                            <div
                                class="leading-none text-white text-opacity-90"
                            >
                                Share with Friends
                            </div>
                            <div
                                class="mt-1 leading-none text-white text-opacity-90"
                            >
                                Get Free Watching
                            </div>
                        </div>
                        <div
                            class="bg-white text-prim font-bold px-3 py-1 rounded-full shadow"
                            @click="showInviteModal = true"
                        >
                            Share
                        </div>
                    </div>
                    <div class="mt-8 flex items-center h-16">
                        <IonIcon
                            class="text-neutral-100 text-xl"
                            :icon="timeOutline"
                        />
                        <div class="ml-2 flex-1">Watch History</div>
                        <IonIcon
                            class="text-neutral-500"
                            :icon="chevronForwardOutline"
                        ></IonIcon>
                    </div>
                    <div class="flex overflow-auto -mx-4 pl-4">
                        <SeriesItem
                            v-for="item in histories"
                            :key="item.id"
                            :series="item.series"
                            :episode="item.episode"
                            class="mr-4"
                        />
                    </div>
                    <div
                        class="flex items-center h-16"
                        @click="router.push('/feedback')"
                    >
                        <IonIcon
                            class="text-neutral-100 text-xl"
                            :icon="chatboxOutline"
                        />
                        <div class="ml-2 flex-1">Feedback</div>
                        <IonIcon
                            class="text-neutral-500"
                            :icon="chevronForwardOutline"
                        ></IonIcon>
                    </div>
                </div>
            </div>
            <ShareModal v-model="showInviteModal" />
        </ion-content>
    </ion-page>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {
    IonPage,
    IonContent,
    IonIcon,
    onIonViewDidEnter,
    IonModal,
    useIonRouter,
    IonItemGroup,
    IonItem,
    IonLabel,
} from "@ionic/vue";
import {
    settingsOutline,
    timeOutline,
    chevronForwardOutline,
    chatboxOutline,
} from "ionicons/icons";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store/user";
import http from "@/plugins/http";
import bgInviteCell from "@/assets/bg_invite_cell.png";
import bgInviteModal from "@/assets/bg_invite_modal.png";
import SeriesItem from "@/components/SeriesItem.vue";
import IconAvatar from "@/assets/icon_avatar.png";
import ShareModal from "@/components/ShareModal.vue";
import { useDebounceFn } from "@vueuse/core";
import { showConsole } from "@/plugins/eruda";
import { parse, format, isAfter, parseISO } from "date-fns";

const router = useIonRouter();
const { user } = storeToRefs(useUserStore());
const histories = ref<any[]>([]);
const membership = ref({
    purchase: false,
    expireAt: "",
    expired: false,
});
function getData() {
    http.get("/playHistories").then((res) => {
        histories.value = res.data;
    });
    http.get("/memberships/my").then((res) => {
        const expireAt = parseISO(res.expireAt);
        if (isAfter(expireAt, new Date())) {
            membership.value = {
                purchase: true,
                expireAt: format(expireAt, "yyyy-MM-dd"),
                expired: false,
            };
        } else {
            membership.value = {
                purchase: true,
                expireAt: format(expireAt, "yyyy-MM-dd"),
                expired: true,
            };
        }
    });
}
onIonViewDidEnter(() => {
    getData();
});

const showInviteModal = ref(false);

function profile() {
    if (user.value && !user.value.visitor) {
        router.push("/profile");
    } else {
        router.push("/login");
    }
}

const count = reactive({ value: 0 });
function clickMe() {
    count.value++;
    resetCount();
    if (count.value > 10) {
        showConsole(true);
    }
}

const resetCount = useDebounceFn(() => {
    count.value = 0;
}, 1000);
</script>
<style lang="less" scoped>
.top {
    padding-top: var(--ion-safe-area-top);
    background: linear-gradient(
        180deg,
        rgba(22, 3, 9, 1) 0%,
        rgba(51, 5, 14, 0) 100%
    );
}

ion-item {
    --min-height: 54px;
}
</style>
