<template>
    <LayoutAuthenticated>

        <Head title="Edit dataset" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiImageText" title="Update dataset" main>
                <BaseButton :route-name="stardust.route('dataset.list')" :icon="mdiArrowLeftBoldOutline" label="Back"
                    color="white" rounded-full small />
            </SectionTitleLineWithButton>

            <!-- max-w-2xl	max-width: 42rem; /* 672px */ -->
            <!-- <div class="max-w-2xl mx-auto"> -->

            <CardBox :form="true">
                <div class="mb-4">
                    <!-- <label for="title" class="block text-gray-700 font-bold mb-2">Title:</label>
                    <input
                        type="text"
                        id="title"
                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        v-model="form.language"
                    /> -->
                    <div class="flex flex-col md:flex-row">
                        <FormField label="Language *" help="required: select dataset main language"
                            :class="{ 'text-red-400': errors.language }" class="w-full flex-1">
                            <FormControl required v-model="form.language" :type="'select'" placeholder="[Enter Language]"
                                :errors="form.errors.language" :options="{ de: 'de', en: 'en' }">
                                <div class="text-red-400 text-sm" v-if="form.errors.language">
                                    {{ form.errors.language.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>
                    <FormField label="Dataset Type *" help="required: dataset type"
                        :class="{ 'text-red-400': form.errors.type }">
                        <FormControl required v-model="form.type" :type="'select'" placeholder="-- select type --"
                            :errors="errors.type" :options="doctypes">
                            <div class="text-red-400 text-sm" v-if="form.errors.type && Array.isArray(form.errors.type)">
                                {{ form.errors.type.join(', ') }}
                            </div>
                        </FormControl>
                    </FormField>

                    <!-- titles -->
                    <CardBox class="mb-6 shadow" :has-form-data="true" title="Titles" :icon="mdiFinance"
                        :header-icon="mdiPlusCircle" v-on:header-icon-click="addTitle()">
                        <div class="flex flex-col md:flex-row">
                            <FormField label="Main Title *" help="required: main title"
                                :class="{ 'text-red-400': form.errors['titles.0.value'] }" class="w-full mr-1 flex-1">
                                <FormControl required v-model="form.titles[0].value" type="text"
                                    placeholder="[enter main title]">
                                    <div class="text-red-400 text-sm"
                                        v-if="form.errors['titles.0.value'] && Array.isArray(form.errors['titles.0.value'])">
                                        {{ form.errors['titles.0.value'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                            <FormField label="Main Title Language*" help="required: main title language"
                                :class="{ 'text-red-400': form.errors['titles.0.language'] }" class="w-full ml-1 flex-1">
                                <FormControl required v-model="form.titles[0].language" type="text" :is-read-only="true">
                                    <div class="text-red-400 text-sm"
                                        v-if="form.errors['titles.0.language'] && Array.isArray(form.errors['titles.0.language'])">
                                        {{ form.errors['titles.0.language'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                        </div>

                        <label v-if="form.titles.length > 1">additional titles </label>
                        <!-- <BaseButton :icon="mdiPlusCircle" @click.prevent="addTitle()" color="modern" rounded-full small /> -->
                        <table class="table-auto">
                            <thead>
                                <tr>
                                    <!-- <th v-if="checkable" /> -->
                                    <th scope="col">Title Value *</th>
                                    <th>Title Type*</th>
                                    <th>Title Language*</th>
                                    <th />
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(item, index) in form.titles" :key="index">
                                    <tr v-if="item.type != 'Main'">
                                        <!-- <td scope="row">{{ index + 1 }}</td> -->
                                        <td scope="row">
                                            <FormControl required v-model="form.titles[index].value" type="text"
                                                placeholder="[enter main title]">
                                                <div class="text-red-400 text-sm"
                                                    v-if="form.errors[`titles.${index}.value`]">
                                                    {{ form.errors[`titles.${index}.value`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td>
                                            <FormControl required v-model="form.titles[index].type" type="select"
                                                :options="titletypes" placeholder="[select title type]">
                                                <div class="text-red-400 text-sm"
                                                    v-if="Array.isArray(form.errors[`titles.${index}.type`])">
                                                    {{ form.errors[`titles.${index}.type`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td>
                                            <FormControl required v-model="form.titles[index].language" type="select"
                                                :options="{ de: 'de', en: 'en' }" placeholder="[select title language]">
                                                <div class="text-red-400 text-sm"
                                                    v-if="form.errors[`titles.${index}.language`]">
                                                    {{ form.errors[`titles.${index}.language`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td>
                                        <td class="before:hidden lg:w-1 whitespace-nowrap">
                                            <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                                <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
                                                <BaseButton color="danger" :icon="mdiTrashCan" small
                                                    @click.prevent="removeTitle(index)" />
                                            </BaseButtons>
                                        </td>
                                        </td>

                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </CardBox>
                </div>

                <div class="mb-4">
                    <label for="description" class="block text-gray-700 font-bold mb-2">Description:</label>
                    <textarea id="description"
                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        v-model="form.type"></textarea>
                </div>

                <div class="mb-4">
                    <!-- <label for="project" class="block text-gray-700 font-bold mb-2">Project:</label>
                    <select
                        id="project"
                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        v-model="dataset.project_id"
                    >
                        <option v-for="project in projects" :key="project.id" :value="project.id" class="block px-4 py-2 text-gray-700">
                            {{ project.label }}
                        </option>
                    </select> -->
                </div>
                <div class="mb-4">
                    <label for="license" class="block text-gray-700 font-bold mb-2">License:</label>
                    <!-- <select
                        id="license"
                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        v-model="dataset.license_id"
                    >
                        <option v-for="license in licenses" :key="license.id" :value="license.id" class="block px-4 py-2 text-gray-700">
                            {{ license.name_long }}
                        </option>
                    </select> -->
                </div>
                <!-- Add more input fields for the other properties of the dataset -->
                <!-- <button
                    type="submit"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                >
                    Save
                </button> -->
                <template #footer>
                    <BaseButtons>
                        <BaseButton type="submit" label="Submit" color="info" :class="{ 'opacity-25': form.processing }"
                            :disabled="form.processing">
                        </BaseButton>
                    </BaseButtons>
                </template>
            </CardBox>
            <!-- </div> -->
        </SectionMain>
    </LayoutAuthenticated>
</template>

<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import { Dataset, Title } from '@/Dataset';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import { mdiImageText, mdiArrowLeftBoldOutline, mdiPlusCircle, mdiFinance, mdiTrashCan } from '@mdi/js';
// import BaseDivider from '@/Components/BaseDivider.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import CardBox from '@/Components/CardBox.vue';
import { stardust } from '@eidellev/adonis-stardust/client';

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

// const projects = reactive([]);
// const licenses = reactive([]);

let form = useForm<Dataset>(props.dataset as Dataset);
// const form = useForm({
//     _method: 'put',
//     login: props.user.login,
//     email: props.user.email,
//     password: '',
//     password_confirmation: '',
//     roles: props.userHasRoles, // fill actual user roles from db
// });

// async created() {
//     // Fetch the list of projects and licenses from the server
//     const response = await fetch('/api/datasets/edit/' + this.dataset.id);
//     const data = await response.json();
//     this.projects = data.projects;
//     this.licenses = data.licenses;
// }
const addTitle = () => {
    let newTitle: Title = { value: '', language: '', type: '' };
    //this.dataset.files.push(uploadedFiles[i]);
    form.titles.push(newTitle);
};
const removeTitle = (key) => {
    form.titles.splice(key, 1);
};

</script>

<!-- <style>
.max-w-2xl {
    max-width: 2xl;
}

.text-2xl {
    font-size: 2xl;
}

.font-bold {
    font-weight: bold;
}

.mb-4 {
    margin-bottom: 1rem;
}

.block {
    display: block;
}

.text-gray-700 {
    color: #4b5563;
}

.shadow {
    box-shadow:
        0 0 0 1px rgba(66, 72, 78, 0.05),
        0 1px 2px 0 rgba(66, 72, 78, 0.08),
        0 2px 4px 0 rgba(66, 72, 78, 0.12),
        0 4px 8px 0 rgba(66, 72, 78, 0.16);
}
</style> -->
