<!-- Schedules view -->
<script setup lang="ts">
import { inject, onMounted, ref } from 'vue';
import Container from '../components/layout/Container.vue';
import PageHeading from '../components/layout/PageHeading.vue';
import IconPlus from '../components/icons/IconPlus.vue';
import Button from '../components/base/Button.vue';
import Card from '../components/layout/Card.vue';
import ScheduleAccordion from '../components/schedule/ScheduleAccordion.vue';
import { AppConfigType, ScheduleType } from '../types';
import { useRouter } from 'vue-router';
import useSetPageTitle from '../composables/useSetPageTitle';
import { useGettext } from 'vue3-gettext';
import { useSchedulesStore } from '../stores/useSchedulesStore';
import {useTokensStore} from '../stores/useTokensStore';

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

// Set page title
useSetPageTitle($gettext('Schedules'));

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

// Get schedules from store
const { schedules, updateSchedules, refreshSchedules } = useSchedulesStore();

// Get current token count
const { isTokenLimitReached } = useTokensStore();

// Router
const router = useRouter();

// Account type
const isAccountFree = inject<boolean>('isAccountFree');

// Account expired
const isAccountExpired = inject<boolean>('isAccountExpired');

// Update the schedules on mount
onMounted(() => {
	// Fetch schedules from the store
	updateSchedules();
});
</script>

<template>
    <Container>
        <!-- Heading -->
        <PageHeading :heading="$gettext('Schedules')" />

        <div class="flex flex-col lg:flex-row gap-6 lg:gap-10 mt-8">
            <!-- Schedule -->
            <div class="flex-1">
                <!-- Add new schedule -->
                <div class="text-right">
                    <Button
                        class="max-lg:w-full"
                        :text="$gettext('Add new schedule')"
                        size="large"
                        :icon-position="'left'"
                        :disabled="isAccountFree || isTokenLimitReached || isAccountExpired"
                        @click.prevent="router.push('/add-schedule')"
                    >
                        <IconPlus />
                    </Button>
                </div>

                <!-- Schedules accordions -->
                <div class="flex flex-col gap-5 mt-5" v-if="schedules.length" :key="refreshSchedules">
                    <ScheduleAccordion
                        v-for="schedule in schedules"
                        :schedule
                        :key="schedule.id"
                    />
                </div>

                <div v-else>
                    <p class="text-center text-lg font-bold mt-5">{{ $gettext('No schedules to display!') }}</p>
                </div>
            </div>

            <!-- Card -->
            <div class="max-w-[370px] mx-auto w-full lg:w-1/3 2xl:w-1/4">
                <Card
                    :image-url="`${config.plugin_url}/public/images/articles.png`"
                    :image-alt="$gettext('Upgrade to premium plan')"
                    type="vertical"
                    v-if="isAccountFree"
                >
                    <div class="flex flex-col gap-6">
                        <p class="text-info-900">
                            {{ $gettext('On trial you can generate and publish only one article.') }}
                        </p>

                        <p class="text-info-900">
                            {{
                                $gettext(
                                    'Upgrade to paid plan to publish articles more often - few times a day, on different hours.'
                                )
                            }}
                        </p>

                        <Button :text="$gettext('Upgrade')" size="large" @click.prevent="router.push('/upgrade')" />
                    </div>
                </Card>

                <Card
                    :image-url="`${config.plugin_url}/public/images/schedules-paid.png`"
                    :image-alt="$gettext('Buy more articles')"
                    type="vertical"
                    v-else
                >
                    <div class="flex flex-col gap-6">
                        <p class="text-info-900">
                            {{ $gettext('Run out of articles for the week? We got you covered.') }}
                        </p>

                        <p class="text-info-900">
                            {{
                                $gettext(
                                    'Buy additional package of 5, 10, or 15 articles, which will be added to your account permanently.'
                                )
                            }}
                        </p>

                        <Button
                            :text="$gettext('Add more articles')"
                            size="large"
                            type="secondary"
							:disabled="isAccountExpired"
                            @click.prevent="router.push('/add-articles')"
                        />
                    </div>
                </Card>
            </div>
        </div>
    </Container>
</template>

<style lang="scss" scoped></style>
