<script setup lang="ts">
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import { useForm, Head, usePage } from '@inertiajs/vue3';
// import { Inertia } from '@inertiajs/inertia';
import { computed, Ref } from 'vue';
import CardBox from '@/Components/CardBox.vue';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
import { mdiArrowLeftBoldOutline, mdiLockOpen } from '@mdi/js';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';

const props = defineProps({
    dataset: {
        type: Object,
        default: () => ({}),
    },
});

const flash: Ref<any> = computed(() => {
    return usePage().props.flash;
});
const errors: Ref<any> = computed(() => {
    return usePage().props.errors;
});

const form = useForm({
    preferred_reviewer: '',
    preferred_reviewer_email: '',
    preferation: 'yes_preferation',

    // preferation: '',
    // isPreferationRequired: false,
});

// const preferation = ref('yes_preferation');
// const isPreferationRequired = ref(false);
const isPreferationRequired = computed(() => form.preferation === 'yes_preferation');

const handleSubmit = async (e: Event) => {
    e.preventDefault();

    await form.put(stardust.route('dataset.releaseUpdate', [props.dataset.id]));
    // await form.put(stardust.route('editor.dataset.update', [props.dataset.id]));
};
</script>

<template>
    <LayoutAuthenticated>
        <Head title="Release saved datasets" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiLockOpen" title="Release your dataset for Editor" main>
                <BaseButton
                    :route-name="stardust.route('dataset.list')"
                    :icon="mdiArrowLeftBoldOutline"
                    label="Back"
                    color="white"
                    rounded-full
                    small
                />
            </SectionTitleLineWithButton>
            <CardBox form @submit.prevent="handleSubmit">
                <FormValidationErrors v-bind:errors="errors" />
                <div class="lex flex-col md:flex-row mb-3">
                    <label for="elevation-option-one" class="pure-radio">
                        <input id="elevation-option-one" type="radio" v-model="form.preferation" value="yes_preferation" />
                        preferred reviewer
                    </label>
                    <label for="elevation-option-two" class="pure-radio">
                        <input id="elevation-option-two" type="radio" v-model="form.preferation" value="no_preferation" />
                        no preferred reviewer
                    </label>
                </div>
                <div v-if="isPreferationRequired == true">
                    <FormField label="preferred reviewer" :class="{ 'text-red-400': form.errors.preferred_reviewer }">
                        <FormControl
                            v-model="form.preferred_reviewer"
                            type="text"
                            placeholder="-- enter name of preferred reviewer --"
                            required
                            :error="form.errors.preferred_reviewer"
                        >
                            <div class="text-red-400 text-sm" v-if="form.errors.preferred_reviewer">
                                {{ form.errors.preferred_reviewer }}
                            </div>
                        </FormControl>
                    </FormField>
                    <FormField label="reviewer email" :class="{ 'text-red-400': form.errors.preferred_reviewer_email }">
                        <FormControl
                            v-model="form.preferred_reviewer_email"
                            type="text"
                            placeholder="-- enter email of reviewer --"
                            required
                            :error="form.errors.preferred_reviewer_email"
                        >
                            <div class="text-red-400 text-sm" v-if="form.errors.preferred_reviewer_email">
                                {{ form.errors.preferred_reviewer_email }}
                            </div>
                        </FormControl>
                    </FormField>
                </div>
                
                <!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
					{{ flash.message }}
					class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
				</NotificationBar> -->
                <div v-if="flash && flash.warning" class="flex flex-col mt-6 animate-fade-in">
                    <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
                        <p class="font-bold">Be Warned</p>
                        <p>{{ flash.warning }}</p>
                    </div>
                </div>

                <template #footer>
                    <BaseButtons>
                        <BaseButton
                            type="submit"
                            color="info"
                            label="Release"
                            :class="{ 'opacity-25': form.processing }"
                            :disabled="form.processing"
                        />
                    </BaseButtons>
                </template>
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
