<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">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"
                        />
                        <div class="ml-4 flex-1">
                            <div class="text-lg">{{ user?.username }}</div>
                            <div
                                v-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 font-bold text-white text-opacity-90"
                            >
                                SHARE WITH YOUR FRIENDS
                            </div>
                            <div
                                class="mt-1 leading-none font-bold 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 text-xl h-16">
                        <IonIcon class="text-neutral-100" :icon="timeOutline" />
                        <div class="ml-2 text-base 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 text-xl h-16">
                        <IonIcon
                            class="text-neutral-100"
                            :icon="chatboxOutline"
                        />
                        <div class="ml-2 text-base flex-1">Feedback</div>
                        <IonIcon
                            class="text-neutral-500"
                            :icon="chevronForwardOutline"
                        ></IonIcon>
                    </div>
                </div>
            </div>
            <ion-modal
                id="invite-modal"
                :isOpen="showInviteModal"
                @didDismiss="showInviteModal = false"
            >
                <div class="content-wrapper text-base font-bold">
                    <div
                        class="code-wrapper flex flex-col items-center justify-center"
                    >
                        <div class="font-bold">INVITE 3 FRIENDS</div>
                        <div class="">GET 7 DAYS FREE WATCHING</div>
                        <img class="mt-2" :src="qrcode" alt="QR Code" />
                        <div class="mt-2 font-bold">INVITED: 0</div>
                    </div>
                    <div class="flex mt-4 text-center text-sm">
                        <div
                            class="flex-grow border-2 border-white rounded-full box-border h-10 flex items-center justify-center"
                        >
                            Save QR Code
                        </div>
                        <div
                            class="ml-6 flex-grow bg-prim rounded-full h-10 flex items-center justify-center"
                        >
                            Share
                        </div>
                    </div>
                </div>
            </ion-modal>
        </ion-content>
    </ion-page>
</template>

<script setup lang="ts">
import { 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 { useQRCode } from "@vueuse/integrations/useQRCode";
import SeriesItem from "@/components/SeriesItem.vue";
import IconAvatar from "@/assets/icon_avatar.png";

const router = useIonRouter();
const { user } = storeToRefs(useUserStore());
const histories = ref<any[]>([]);
function getHistories() {
    http.get("/playHistories").then((res) => {
        histories.value = res.data;
    });
}
onIonViewDidEnter(() => {
    getHistories();
});

const showInviteModal = ref(false);
const qrcode = useQRCode("text-to-encode", {
    margin: 2,
    width: 500,
});
</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%
    );
}
#invite-modal {
    --width: fit-content;
    --min-width: 290px;
    --height: fit-content;
    --border-radius: 0;
    --background: transparent;
    .content-wrapper {
        .code-wrapper {
            width: 290px;
            height: 350px;
            background-image: url(@/assets/bg_invite_modal.png);
            background-size: cover;
            background-position: center;
            img {
                width: 215px;
                height: 215px;
                border-radius: 8px;
            }
        }
    }
}
ion-item {
    --min-height: 54px;
}
</style>
