<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { ref } from 'vue';
import { SettingSection as SettingSectionConst } from '@/constants/setting-section';
import { useCan } from '@/composables/useCan';
import SettingLayout from '@/layouts/SettingLayout.vue';
import type {
    HomepageSettingsData,
    HrSettingsData,
    MarketplaceSettingsData,
    SettingSection,
    SocialMediaSettingsData,
    SystemSettingsData,
} from '@/types/setting';
import HomepageSection from './form/HomepageSection.vue';
import HrSection from './form/HrSection.vue';
import MarketplaceSection from './form/MarketplaceSection.vue';
import SocialMediaSection from './form/SocialMediaSection.vue';
import SystemSection from './form/SystemSection.vue';

defineProps<{
    system: SystemSettingsData;
    socialMedia: SocialMediaSettingsData;
    marketplace: MarketplaceSettingsData;
    hr: HrSettingsData;
    homepage: HomepageSettingsData;
    hasPendingMarketplaceVerification: boolean;
}>();

const { hasRole } = useCan();

const activeSection = ref<SettingSection>(
    hasRole('admin-toko') ? SettingSectionConst.MARKETPLACE : SettingSectionConst.SYSTEM
);
</script>

<template>

    <Head title="Pengaturan" />

    <SettingLayout v-model:section="activeSection">
        <SystemSection v-if="activeSection === SettingSectionConst.SYSTEM" :data="system" />
        <HomepageSection v-else-if="activeSection === SettingSectionConst.HOMEPAGE" :data="homepage" />
        <SocialMediaSection v-else-if="activeSection === SettingSectionConst.SOCIAL" :data="socialMedia" />
        <MarketplaceSection v-else-if="activeSection === SettingSectionConst.MARKETPLACE" :data="marketplace" :has-pending-verification="hasPendingMarketplaceVerification" />
        <HrSection v-else-if="activeSection === SettingSectionConst.HR" :data="hr" />
    </SettingLayout>
</template>
