<!-- View to display adding a schedule schedule -->
<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import Steps from '../components/navigation/Steps.vue';
import { StepType, ScheduleType, AppConfigType } from '../types';
import Subject from '../components/new-schedule/Subject.vue';
import Schedule from '../components/new-schedule/Schedule.vue';
import ScheduleSettings from '../components/new-schedule/ScheduleSettings.vue';
import Summary from '../components/new-schedule/Summary.vue';
import useSetPageTitle from '../composables/useSetPageTitle';
import { useGettext } from 'vue3-gettext';
import { useTokensStore } from '../stores/useTokensStore';
import router from '../router';

// Translations
const { $gettext } = useGettext();

// Get usage limit
const { isTokenLimitReached } = useTokensStore();

// Set page title
useSetPageTitle($gettext('Add schedule'));

// Get plugin config
const config: AppConfigType = inject('pluginConfig');

// Check if it's the first schedule
const isFirstSchedule = config.settings.has_plugin ? false : true;

// Current index and component to be displayed
const activeIndex = ref(0);
const stepComponentMap = {
    0: Subject,
    1: Schedule,
    2: ScheduleSettings,
    3: Summary,
};

// Step options
const stepsOptions: StepType[] = [
    {
        label: $gettext('Subject'),
        callback: () => {
            activeIndex.value = 0;
        },
    },
    {
        label: $gettext('Date & time'),
        callback: () => {
            activeIndex.value = 1;
        },
    },
    {
        label: $gettext('Settings'),
        callback: () => {
            activeIndex.value = 2;
        },
    },
    {
        label: $gettext('Articles'),
    },
];

// Get current step component
const stepComponent = computed(() => stepComponentMap[activeIndex.value]);

// Store schedule settings
const schedule = ref<ScheduleType>({
    id: Math.floor(Math.random() * 1000).toString(),
    topic: '',
    amount: '',
    days: [],
    time: '',
    time_zone: '',
    author: '',
    lang: '',
    advSchedule: null,
    articles_keywords: Array(7).fill([]),
    activity_date_enabled: false,
    activity_date: null,
});

// Check if schedule can be added
if (isTokenLimitReached.value) {
    // Redirect to main page
    router.push('/');
}
</script>

<template>
    <div class="flex w-full flex-col items-center py-16 px-8">
        <!-- Steps -->
        <div class="mx-auto max-w-[833px] w-full">
            <Steps :steps="stepsOptions" :active-index="activeIndex" />
        </div>
        <!-- Steps -->

        <!-- Current step -->
        <component
            :is="stepComponent"
            :schedule
            :is-first-schedule="isFirstSchedule"
            class="entry-animation"
            @previous-step="activeIndex--"
            @next-step="activeIndex++"
            @update-schedule="(newSchedule : ScheduleType) => schedule = newSchedule"
        ></component>
    </div>
</template>

<style lang="scss" scoped>
.entry-animation {
    animation: fadeUp 0.2s ease-in-out forwards;
}

@keyframes fadeUp {
    from {
        translate: 0 1rem;
        opacity: 0.3;
    }

    to {
        translate: 0 0;
        opacity: 1;
    }
}
</style>
