<!-- First schedule settings view -->
<script setup lang="ts">
import { AppConfigType, OptionType, ScheduleType } from '~src/admin/types';
import Select from '../form/Select.vue';
import { inject, ref } from 'vue';
import Button from '../base/Button.vue';
import IconArrowLeft from '../icons/IconArrowLeft.vue';
import TextInput from '../form/TextInput.vue';
import useGetLanguages from '~src/admin/composables/useGetLanguages';
import Card from '../layout/Card.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];
}>();

// Author options
const authorOptions: OptionType[] = [
    ...config.wordpress.users.map((user) => {
        return {
            label: user,
            value: user,
        };
    }),
    {
        label: $gettext('Add new author'),
        value: 'new_author',
    },
];

// Languages for select
const languageOptions = useGetLanguages();

// Store values from inputs
const selectedAuthor = ref(schedule.author || '');
const selecetedLanguage = ref<string>(schedule.lang || '');
const newAuthorName = ref('');

// Show new author correctly
if (schedule.author && !config.wordpress.users.includes(schedule.author)) {
    selectedAuthor.value = 'new_author';
    newAuthorName.value = schedule.author;
}

// Handle errors
const errorAuthor = ref('');
const errorLanguage = ref('');
const errorNewAuthor = ref('');

// Go to next step
const goToNextStep = () => {
    errorAuthor.value = '';
    errorLanguage.value = '';

    // Author validation
    if (!selectedAuthor.value) {
        errorAuthor.value = $gettext('Please select author.');
    }

    // New author validation
    if (selectedAuthor.value === 'new_author' && !newAuthorName.value) {
        errorNewAuthor.value = $gettext('Please provide author name.');
    }

    // Language validation
    if (!selecetedLanguage.value) {
        errorLanguage.value = $gettext('Please select language.');
    }

    if (errorAuthor.value || errorLanguage.value || errorNewAuthor.value) {
        return;
    }

    // Update the schedule
    const newSchedule = {
        ...schedule,
        author: selectedAuthor.value === 'new_author' ? newAuthorName.value : selectedAuthor.value,
        lang: selecetedLanguage.value,
    };

    emit('updateSchedule', newSchedule);

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

// Set texts based on if schedule is first or not
let buttonText = $gettext('Save your first schedule');

if (!isFirstSchedule) {
    buttonText = $gettext('Save schedule');
}

// 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('Who is the author?') }}</h1>
            <p class="text-base-200">{{ $gettext('Choose author and language of your articles.') }}</p>
        </div>
        <!-- Intro text -->

        <div class="max-w-[300px] w-full mx-auto mb-12 md:mb-20">
            <!-- Author -->
            <Select
                :options="authorOptions"
                :error-msg="errorAuthor"
                :placeholder="$gettext('Choose author...')"
                class="mb-5"
                v-model="selectedAuthor"
            />

            <!-- New author -->
            <TextInput
                :placeholder="$gettext('Author\'s name')"
                :error-msg="errorNewAuthor"
                class="mb-5"
                v-model="newAuthorName"
                v-if="selectedAuthor === 'new_author'"
            />

            <!-- Language -->
            <Select
                :options="languageOptions"
                :error-msg="errorLanguage"
                :placeholder="$gettext('Choose language...')"
                class="mb-8"
                v-model="selecetedLanguage"
            />

            <!-- Button -->
            <Button class="w-full" :text="$gettext(buttonText)" size="large" @click.prevent="goToNextStep" />

            <!-- Go back -->
            <div class="text-center mt-4">
                <Button
                    :text="$gettext('back to Date & time')"
                    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" 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 more of them.') }}
                </p>
            </Card>
        </div>
    </div>
</template>

<style scoped></style>
