<template>
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonButtons slot="start">
                    <IonBackButton text="" />
                </IonButtons>
                <IonTitle>Settings</IonTitle>
            </IonToolbar>
        </IonHeader>
        <IonContent>
            <div class="mt-8 px-4 rounded-md">
                <IonItemGroup class="bg-neutral-900 rounded-md">
                    <ion-item detail button @click="router.push('/profile')">
                        <ion-label> Profile </ion-label>
                    </ion-item>
                    <ion-item detail button>
                        <ion-label> Privacy and Terms </ion-label>
                    </ion-item>
                </IonItemGroup>
                <IonButton
                    v-if="user && !user.visitor"
                    id="open-action-sheet"
                    class="mt-8 btn-logout"
                    color="light"
                    expand="block"
                >
                    Log out
                </IonButton>
            </div>
            <ion-action-sheet
                v-if="user && !user.visitor"
                trigger="open-action-sheet"
                header="Are you sure you want to log out?"
                :buttons="actionSheetButtons"
            ></ion-action-sheet>
        </IonContent>
    </IonPage>
</template>
<script setup lang="ts">
import {
    IonPage,
    IonContent,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonButtons,
    IonBackButton,
    IonItem,
    IonItemGroup,
    IonLabel,
    IonButton,
    IonActionSheet,
    useIonRouter,
} from "@ionic/vue";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import http from "@/plugins/http";
const userStore = useUserStore();
const { setUser } = userStore;
const { user } = storeToRefs(userStore);
const router = useIonRouter();
const actionSheetButtons = [
    {
        text: "Log out",
        role: "destructive",
        data: {
            action: "share",
        },
        handler: async () => {
            setUser(null);
            http.setToken(null);
            const { token, user } = await http.get("/users/guest");
            setUser(user);
            http.setToken(token);
        },
    },
    {
        text: "Cancel",
        role: "cancel",
        data: {
            action: "cancel",
        },
    },
];
</script>
<style lang="less" scoped>
ion-item {
    --background: transparent;
    --min-height: 54px;
    &:last-child {
        --border-style: none;
    }
}
.btn-logout {
    --border-radius: 6px;
}
</style>
