<!-- First schedule schedule view -->
<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import { AppConfigType, ScheduleType } from '~src/admin/types';
import Button from '../base/Button.vue';
import IconArrowLeft from '../icons/IconArrowLeft.vue';
import Card from '../layout/Card.vue';
import BaseSchedule from '../schedule/BaseSchedule.vue';
import { useRouter } from 'vue-router';
import { useGettext } from 'vue3-gettext';

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

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

// Router
const router = useRouter();

// Props
const { schedule, isFirstSchedule } = defineProps<{
    schedule: ScheduleType;
    isFirstSchedule: boolean;
}>();

// Emits
const emit = defineEmits<{
    nextStep: [];
    previousStep: [];
    updateSchedule: [schedule: ScheduleType];
}>();

// Current schedule
const currentSchedule = ref<ScheduleType>(schedule);

// Track articles left
const currentArticlesLeft = ref(0);

// Go to next step
const goToNextStep = () => {
    // Populate the keywords before the next step
    currentSchedule.value.articles_keywords = Array(7).fill([]);

    if (currentSchedule.value.advSchedule) {
        // Generate empty keywords for each time
        Object.entries(currentSchedule.value.advSchedule).forEach(([dayKey, dayValue]) => {
            currentSchedule.value.articles_keywords[Number(dayKey)] = Array(dayValue.length).fill([]);
        });
    }
    // Update the main schedule
    emit('updateSchedule', currentSchedule.value);

    // Go to next step and update the schedule
    emit('nextStep');
};

// Control the disabled state of the button
const canGoToNextStep = computed(() => {
    // First check if there are articles left
    if (currentArticlesLeft.value < 0) {
        return true; // Disable the button if no articles left
    }

    // Rhen check if anything is selected
    if (currentSchedule.value.advSchedule) {
        return Object.values(currentSchedule.value.advSchedule).reduce((sum, arr) => sum + arr.length, 0) === 0;
    } else {
        return currentSchedule.value.days.length === 0;
    }
});

// Set texts based on if schedule is first or not
let title = $gettext('When your first article should be published?');
let subtitle = $gettext('We will generate and publish article on your behalf on a given day and time.');

if (!isFirstSchedule) {
    title = $gettext('When articles should be published?');
    subtitle = $gettext('We will generate and publish articles on your behalf on a given day and time.');
}

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

<template>
    <div>
        <!-- Intro text -->
        <div class="mt-12 md:mt-20 mb-8 text-center">
            <h1 class="mb-1 text-md font-bold leading-tight">
                {{ $gettext('When your first article should be published?') }}
            </h1>
            <p class="text-base-200">
                {{ $gettext('We will generate and publish article on your behalf on a given day and time.') }}
            </p>
        </div>
        <!-- Intro text -->

        <!-- Schedule time -->
        <div class="max-w-[914px] w-full">
            <!-- Set schedule -->
            <BaseSchedule
                :schedule
                @update-schedule="(newSchedule : ScheduleType) => currentSchedule = newSchedule"
                @articles-left-update="(articlesLeft: number) => currentArticlesLeft = articlesLeft"
            />

            <div class="max-w-[300px] mx-auto">
                <!-- Button -->
                <Button
                    class="w-full"
                    :text="$gettext('Next')"
                    size="large"
                    @click.prevent="goToNextStep"
                    :disabled="canGoToNextStep"
                />

                <!-- Go back -->
                <div class="text-center mt-4">
                    <Button
                        :text="$gettext('back to Subject')"
                        size="small"
                        :has-background="false"
                        type="secondary"
                        icon-position="left"
                        @click.prevent="$emit('previousStep')"
                    >
                        <IconArrowLeft />
                    </Button>
                </div>
            </div>

            <!-- Card -->
            <div class="max-w-[520px] mx-auto mt-12 md:mt-20" v-if="isAccountFree">
                <Card
                    :image-url="`${config.plugin_url}/public/images/first-schedule.png`"
                    :image-alt="$gettext('Upgrade to premium plan')"
                >
                    <p class="text-info-900">
                        {{ $gettext('On trial you can generate and publish only one article.') }}
                        <br />
                        <a href="#" class="underline underline-offset-[3px]" @click.prevent="router.push('/upgrade')">
                            {{ $gettext('Upgrade') }}
                        </a>
                        {{
                            $gettext(
                                'to paid plan to publish articles more often - few times a day, on different hours.'
                            )
                        }}
                    </p>
                </Card>
            </div>
        </div>
        <!-- Schedule time -->
    </div>
</template>

<style scoped></style>
