<script lang="ts" setup>
import MainLayout from "@/Layouts/MainLayout.vue"
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue"
import { Head } from "@inertiajs/vue3"
import { ref, watch } from "vue"
import type { SettingField } from "@/Types/types"
import GeneralSettings from "@/Pages/Settings/GeneralSettings.vue"
import FollowerSettings from "@/Pages/Settings/FollowerSettings.vue"

defineOptions({ layout: MainLayout })

const props = defineProps<{
    fields: SettingField[],
    categories: Record<string, string>,
    defaultTab: string
}>()

const tab = ref(props.defaultTab)

watch(tab, (value) => {
    const path = value === 'general' ? '/settings' : `/settings/${value}`
    window.history.replaceState(window.history.state, '', path)
})
</script>

<template>
    <Head title="Settings" />
    <GlassBox title="Your Settings">
        <v-tabs v-model="tab" class="mb-4">
            <v-tab value="general">General</v-tab>
            <v-tab value="followers">Followers</v-tab>
        </v-tabs>

        <v-window v-model="tab">
            <v-window-item value="general">
                <GeneralSettings :fields="fields" :categories="categories" />
            </v-window-item>

            <v-window-item value="followers">
                <FollowerSettings />
            </v-window-item>
        </v-window>
    </GlassBox>
</template>
