<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>

            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                {{ flash.message }}
            </NotificationBar>
            <FormValidationErrors v-bind:errors="errors" />
            <!-- max-w-2xl	max-width: 42rem; /* 672px */ -->
            <!-- <div class="max-w-2xl mx-auto"> -->

            <CardBox :form="true">
                <!-- <FormValidationErrors v-bind:errors="errors" /> -->
                <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">
                        <!-- (1) language field -->
                        <FormField label="Language *" help="required: select dataset main language"
                            :class="{ 'text-red-400': form.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>

                    <!-- (2) licenses -->
                    <FormField label="Licenses" wrap-body :class="{ 'text-red-400': form.errors.licenses }"
                        class="mt-8 w-full mx-2 flex-1">
                        <FormCheckRadioGroup v-model="form.licenses" name="licenses" is-column :options="licenses" />
                    </FormField>

                    <div class="flex flex-col md:flex-row">
                        <!-- (3) dataset_type -->
                        <FormField label="Dataset Type *" help="required: dataset type"
                            :class="{ 'text-red-400': form.errors.type }" class="w-full mx-2 flex-1">
                            <FormControl required v-model="form.type" :type="'select'" placeholder="-- select type --"
                                :errors="form.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>
                        <!-- (4) creating_corporation -->
                        <FormField label="Creating Corporation *"
                            :class="{ 'text-red-400': form.errors.creating_corporation }" class="w-full mx-2 flex-1">
                            <FormControl required v-model="form.creating_corporation" type="text"
                                placeholder="[enter creating corporation]" :is-read-only="true">
                                <div class="text-red-400 text-sm"
                                    v-if="form.errors.creating_corporation && Array.isArray(form.errors.creating_corporation)">
                                    {{ form.errors.creating_corporation.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>

                    <BaseDivider />

                    <!-- (5) titles -->
                    <CardBox class="mb-6 shadow" :has-form-data="false" 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>
                            <thead>
                                <tr>
                                    <!-- <th v-if="checkable" /> -->
                                    <th>Title Value</th>
                                    <th>Title Type</th>
                                    <th>Title Language</th>
                                    <th />
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(title, index) in form.titles" :key="index">
                                    <tr v-if="title.type != 'Main'">
                                        <!-- <td scope="row">{{ index + 1 }}</td> -->
                                        <td data-label="Title Value">
                                            <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 data-label="Title Type">
                                            <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 data-label="Title Language">
                                            <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 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
                                                    v-if="title.id == undefined" @click.prevent="removeTitle(index)" />
                                            </BaseButtons>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </CardBox>

                    <!-- (6) descriptions -->
                    <CardBox class="mb-6 shadow" :has-form-data="false" title="Descriptions" :icon="mdiFinance"
                        :header-icon="mdiPlusCircle" v-on:header-icon-click="addDescription()">
                        <div class="flex flex-col md:flex-row">
                            <FormField label="Main Abstract *" help="required: main abstract"
                                :class="{ 'text-red-400': form.errors['descriptions.0.value'] }"
                                class="w-full mr-1 flex-1">
                                <FormControl required v-model="form.descriptions[0].value" type="textarea"
                                    placeholder="[enter main abstract]">
                                    <div class="text-red-400 text-sm"
                                        v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.value'])">
                                        {{ form.errors['descriptions.0.value'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                            <FormField label="Main Title Language*" help="required: main abstract language"
                                :class="{ 'text-red-400': form.errors['descriptions.0.language'] }"
                                class="w-full  ml-1 flex-1">
                                <FormControl required v-model="form.descriptions[0].language" type="text"
                                    :is-read-only="true">
                                    <div class="text-red-400 text-sm" v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.language'])
                ">
                                        {{ form.errors['descriptions.0.language'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <!-- <th v-if="checkable" /> -->
                                    <th>Title Value</th>
                                    <th>Title Type</th>
                                    <th>Title Language</th>
                                    <th />
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(item, index) in form.descriptions" :key="index">
                                    <tr v-if="item.type != 'Abstract'">
                                        <!-- <td scope="row">{{ index + 1 }}</td> -->
                                        <td data-label="Description Value">
                                            <FormControl required v-model="form.descriptions[index].value" type="text"
                                                placeholder="[enter main title]">
                                                <div class="text-red-400 text-sm"
                                                    v-if="form.errors[`descriptions.${index}.value`]">
                                                    {{ form.errors[`descriptions.${index}.value`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td data-label="Description Type">
                                            <FormControl required v-model="form.descriptions[index].type" type="select"
                                                :options="descriptiontypes" placeholder="[select title type]">
                                                <div class="text-red-400 text-sm"
                                                    v-if="Array.isArray(form.errors[`descriptions.${index}.type`])">
                                                    {{ form.errors[`descriptions.${index}.type`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td data-label="Description Language">
                                            <FormControl required v-model="form.descriptions[index].language"
                                                type="select" :options="{ de: 'de', en: 'en' }"
                                                placeholder="[select title language]">
                                                <div class="text-red-400 text-sm"
                                                    v-if="form.errors[`descriptions.${index}.language`]">
                                                    {{ form.errors[`descriptions.${index}.language`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </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
                                                    v-if="item.id == undefined"
                                                    @click.prevent="removeDescription(index)" />
                                            </BaseButtons>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </CardBox>

                    <!-- (7) authors -->
                    <CardBox class="mb-6 shadow" has-table title="Creators" :icon="mdiBookOpenPageVariant">
                        <SearchAutocomplete source="/api/persons" :response-property="'first_name'"
                            placeholder="search in person table...." v-on:person="onAddAuthor"></SearchAutocomplete>

                        <TablePersons :persons="form.authors" v-if="form.authors.length > 0" :relation="'authors'"/>
                        <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
                            {{ form.errors.authors.join(', ') }}
                        </div>
                    </CardBox>


                    <!-- (8) contributors -->
                    <CardBox class="mb-6 shadow" has-table title="Contributors" :icon="mdiBookOpenPageVariant">
                        <SearchAutocomplete source="/api/persons" :response-property="'first_name'"
                            placeholder="search in person table...." v-on:person="onAddContributor">
                        </SearchAutocomplete>

                        <TablePersons :persons="form.contributors" v-if="form.contributors.length > 0"
                            :contributortypes="contributorTypes" :errors="form.errors" :relation="'contributors'" />
                        <div class="text-red-400 text-sm"
                            v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
                            {{ form.errors.contributors.join(', ') }}
                        </div>
                    </CardBox>

                    <div class="flex flex-col md:flex-row">
                        <!-- (9) project_id -->
                        <FormField label="Project.." help="project is optional"
                            :class="{ 'text-red-400': form.errors.project_id }" class="w-full mx-2 flex-1">
                            <FormControl required v-model="form.project_id" :type="'select'"
                                placeholder="[Select Project]" :errors="form.errors.project_id" :options="projects">
                                <div class="text-red-400 text-sm" v-if="form.errors.project_id">
                                    {{ form.errors.project_id.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <!-- (10) embargo_date -->
                        <FormField label="Embargo Date.." help="embargo date is optional"
                            :class="{ 'text-red-400': form.errors.embargo_date }" class="w-full mx-2 flex-1">
                            <FormControl v-model="form.embargo_date" :type="'date'" placeholder="date('y-m-d')"
                                :errors="form.errors.embargo_date">
                                <div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
                                    {{ form.errors.embargo_date.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>

                    <BaseDivider />

                    <MapComponent v-if="form.coverage" :mapOptions="mapOptions" :baseMaps="baseMaps"
                        :fitBounds="fitBounds" :coverage="form.coverage" :mapId="mapId"
                        v-bind-event:onMapInitializedEvent="onMapInitialized">
                    </MapComponent>
                    <div class="flex flex-col md:flex-row">
                        <!-- x min and max -->
                        <FormField label="Coverage X Min" :class="{ 'text-red-400': form.errors['coverage.x_min'] }"
                            class="w-full mx-2 flex-1">
                            <FormControl required v-model="form.coverage.x_min" type="text" placeholder="[enter x_min]">
                                <div class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.x_min'] && Array.isArray(form.errors['coverage.x_min'])">
                                    {{ form.errors['coverage.x_min'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <FormField label="Coverage X Max" :class="{ 'text-red-400': form.errors['coverage.x_max'] }"
                            class="w-full mx-2 flex-1">
                            <FormControl required v-model="form.coverage.x_max" type="text" placeholder="[enter x_max]">
                                <div class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.x_max'] && Array.isArray(form.errors['coverage.x_max'])">
                                    {{ form.errors['coverage.x_max'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <!-- y min and max -->
                        <FormField label="Coverage Y Min" :class="{ 'text-red-400': form.errors['coverage.y_min'] }"
                            class="w-full mx-2 flex-1">
                            <FormControl required v-model="form.coverage.y_min" type="text" placeholder="[enter y_min]">
                                <div class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.y_min'] && Array.isArray(form.errors['coverage.y_min'])">
                                    {{ form.errors['coverage.y_min'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <FormField label="Coverage Y Max" :class="{ 'text-red-400': form.errors['coverage.y_max'] }"
                            class="w-full mx-2 flex-1">
                            <FormControl required v-model="form.coverage.y_max" type="text" placeholder="[enter y_max]">
                                <div class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.y_max'] && Array.isArray(form.errors['coverage.y_max'])">
                                    {{ form.errors['coverage.y_max'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>

                    <CardBox class="mb-6 shadow" has-table title="Dataset References" :header-icon="mdiPlusCircle"
                        v-on:header-icon-click="addReference">
                        <table class="table-fixed border-green-900" v-if="form.references.length">
                            <thead>
                                <tr>
                                    <th class="w-4/12">Value</th>
                                    <th class="w-2/12">Type</th>
                                    <th class="w-3/12">Relation</th>
                                    <th class="w-2/12">Label</th>
                                    <th class="w-1/12"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in form.references">
                                    <td data-label="Reference Value">
                                        <!-- <input name="Reference Value" class="form-control"
                                                placeholder="[VALUE]" v-model="item.value" /> -->
                                        <FormControl required v-model="item.value" :type="'text'" placeholder="[VALUE]"
                                            :errors="form.errors.embargo_date">
                                            <div class="text-red-400 text-sm"
                                                v-if="form.errors[`references.${index}.value`] && Array.isArray(form.errors[`references.${index}.value`])">
                                                {{ form.errors[`references.${index}.value`].join(', ') }}
                                            </div>
                                        </FormControl>

                                    </td>
                                    <td>
                                        <FormControl required v-model="form.references[index].type" type="select"
                                            :options="referenceIdentifierTypes" placeholder="[type]">
                                            <div class="text-red-400 text-sm"
                                                v-if="Array.isArray(form.errors[`references.${index}.type`])">
                                                {{ form.errors[`references.${index}.type`].join(', ') }}
                                            </div>
                                        </FormControl>
                                    </td>

                                    <td>
                                        <!-- {!! Form::select('Reference[Relation]', $relationTypes, null,
                                            ['placeholder' => '[relationType]', 'v-model' => 'item.relation',
                                            'data-vv-scope' => 'step-2'])
                                            !!} -->
                                        <FormControl required v-model="form.references[index].relation" type="select"
                                            :options="relationTypes" placeholder="[relation type]">
                                            <div class="text-red-400 text-sm"
                                                v-if="Array.isArray(form.errors[`references.${index}.relation`])">
                                                {{ form.errors[`references.${index}.relation`].join(', ') }}
                                            </div>
                                        </FormControl>
                                    </td>
                                    <td data-label="Reference Label">
                                        <!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
                                        <FormControl required v-model="form.references[index].label" type="text"
                                            placeholder="[reference label]">
                                            <div class="text-red-400 text-sm"
                                                v-if="form.errors[`references.${index}.label`] && Array.isArray(form.errors[`references.${index}.label`])">
                                                {{ form.errors[`references.${index}.label`].join(', ') }}
                                            </div>
                                        </FormControl>
                                    </td>
                                    <td class="before:hidden lg:w-1 whitespace-nowrap">
                                        <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
                                        <BaseButton color="danger" :icon="mdiTrashCan" small
                                            @click.prevent="removeReference(index)" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </CardBox>

                    <BaseDivider />

                    <CardBox class="mb-6 shadow" has-table title="Dataset Keywords" :icon="mdiEarthPlus"
                        :header-icon="mdiPlusCircle" v-on:header-icon-click="addKeyword">
                        <!-- <ul>
                                <li v-for="(subject, index) in form.subjects" :key="index">
                                {{ subject.value }} <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeKeyword(index)" />
                                </li>
                            </ul> -->
                        <TableKeywords :keywords="form.subjects" :errors="form.errors" :subjectTypes="subjectTypes"
                            v-if="form.subjects.length > 0" />
                    </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>

                <FileUploadComponent :files="form.files"></FileUploadComponent>

                <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
                    {{ form.errors['files'].join(', ') }}
                </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 @click.stop="submit" :disabled="form.processing" label="Save" color="info"
                            :class="{ 'opacity-25': form.processing }" small>
                        </BaseButton>
                        <!-- <button  :disabled="form.processing" :class="{ 'opacity-25': form.processing }"
                                class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-200 bg-teal-100 text-teal-700 border duration-200 ease-in-out border-teal-600 transition"
                                @click.stop="submit">
                                Save
                            </button> -->
                    </BaseButtons>
                </template>
            </CardBox>
            <!-- </div> -->
        </SectionMain>
    </LayoutAuthenticated>
</template>

<script setup lang="ts">
// import EditComponent from "./../EditComponent";
// export default EditComponent;

// import { Component, Vue, Prop, Setup, toNative } from 'vue-facing-decorator';
// import AuthLayout from '@/Layouts/Auth.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import { useForm, Head, usePage } from '@inertiajs/vue3';
import { computed, ComputedRef } from 'vue';
// import { ref } from 'vue';
// import { MainService } from '@/Stores/main';
// import FormInput from '@/Components/FormInput.vue'; //          @/Components/FormInput.vue'
import { Dataset, Title, Subject, TethysFile, Person, License } from '@/Dataset';
import { stardust } from '@eidellev/adonis-stardust/client';

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 FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import BaseDivider from '@/Components/BaseDivider.vue';
import CardBox from '@/Components/CardBox.vue';
import MapComponent from '@/Components/Map/map.component.vue';
import SearchAutocomplete from '@/Components/SearchAutocomplete.vue';
import TablePersons from '@/Components/TablePersons.vue';
import TableKeywords from '@/Components/TableKeywords.vue';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
import FileUploadComponent from '@/Components/FileUpload.vue';
import { MapOptions } from '@/Components/Map/MapOptions';
import { LatLngBoundsExpression } from 'leaflet';
import { LayerOptions } from '@/Components/Map/LayerOptions';
import {
    mdiImageText,
    mdiArrowLeftBoldOutline,
    mdiPlusCircle,
    mdiFinance,
    mdiTrashCan,
    mdiBookOpenPageVariant,
    mdiEarthPlus,
    mdiAlertBoxOutline,
} from '@mdi/js';
import { notify } from '@/notiwind';
import NotificationBar from '@/Components/NotificationBar.vue';

const props = defineProps({
    // errors: {
    //     type: Object,
    //     default: () => ({}),
    // },
    licenses: {
        type: Object,
        default: () => ({}),
    },
    languages: {
        type: Object,
        default: () => ({}),
    },
    doctypes: {
        type: Object,
        default: () => ({}),
    },
    titletypes: {
        type: Object,
        default: () => ({}),
    },
    projects: {
        type: Object,
        default: () => ({}),
    },
    descriptiontypes: {
        type: Object,
        default: () => ({}),
    },
    contributorTypes: {
        type: Object,
        default: () => ({}),
    },
    subjectTypes: {
        type: Object,
        default: () => ({}),
    },
    referenceIdentifierTypes: {
        type: Object,
        default: () => ({}),
    },
    relationTypes: {
        type: Object,
        default: () => ({}),
    },
    dataset: {
        type: Object,
        default: () => ({}),
    },



});
const flash: ComputedRef<any> = computed(() => {
    // let test = usePage();
    // console.log(test);
    return usePage().props.flash;
});
const errors: ComputedRef<any> = computed(() => {
    return usePage().props.errors;
});
// const errors: ComputedRef<any> = computed(() => {
//     return usePage().props.errors;
// });

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

const mapOptions: MapOptions = {
    center: [48.208174, 16.373819],
    zoom: 3,
    zoomControl: false,
    attributionControl: false,
};
const baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
const fitBounds: LatLngBoundsExpression = [
    [46.4318173285, 9.47996951665],
    [49.0390742051, 16.9796667823],
];
const mapId = 'test';

// const downloadFile = async (id: string): Promise<string> => {
//     const response = await axios.get<Blob>(`/api/download/${id}`, {
//         responseType: 'blob',
//     });
//     const url = URL.createObjectURL(response.data);
//     setTimeout(() => {
//         URL.revokeObjectURL(url);
//     }, 1000);
//     return url;
// };

// for (const file of props.dataset.files) {
//     // console.log(`${file.name} path is ${file.filePath} here.`);
//     file.fileSrc = ref("");
//     // downloadFile(file.id).then((value: string) => {
//     //     file.fileSrc = ref(value);
//     //     form = useForm<Dataset>(props.dataset as Dataset);
//     // });
// }

let form = useForm<Dataset>(props.dataset as Dataset);

// const mainService = MainService();
// mainService.fetchfiles(props.dataset);






// const files = computed(() => props.dataset.file);



// 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 submit = async (): Promise<void> => {
    let route = stardust.route('dataset.update', [props.dataset.id]);
    // await Inertia.post('/app/register', this.form);
    // await router.post('/app/register', this.form);


    let licenses = form.licenses.map((obj) => {
        if (hasIdAttribute(obj)) {
            return obj.id.toString()
        } else {
            return obj;
        }
    });



    // const files = form.files.map((obj) => {
    //     return new File([obj.blob], obj.label, { type: obj.type, lastModified: obj.lastModified });
    // });

    const [fileUploads, fileInputs] = form.files?.reduce(
        ([fileUploads, fileInputs], obj) => {
            if (!obj.id) {
                // return MultipartFile for file upload
                const options: FilePropertyBag = {
                    type: obj.type,
                    lastModified: obj.lastModified
                };
                // let file = new File([obj.blob], `${obj.label}?sortOrder=${obj.sort_order}`, options);
                let file = new File([obj.blob], `${obj.label}`, options);
                // fileUploads[obj.sort_order] = file;
                fileUploads.push(file);
            } else {
                // return normal request input
                fileInputs.push(obj);
            }
            return [fileUploads, fileInputs];
        },
        [[], []] as [Array<File>, Array<TethysFile>]
    ) as [Array<File>, Array<TethysFile>];

    await form
        .transform((data) => ({
            ...data,
            licenses: licenses,
            files: fileUploads,
            fileInputs: fileInputs,
            // files: form.files.map((obj) => {
            //     let file;
            //     if (!obj.id) {
            //         // return MultipartFile for file upload
            //         file = new File([obj.blob], obj.label, { type: obj.type, lastModified: obj.lastModified });
            //     } else {
            //         // return normal request input
            //         file = obj;
            //     }
            //     return file;
            // }),

            rights: 'true',
        }))
        .put(route);
};

const hasIdAttribute = (obj: License | number): obj is License => {
    return typeof obj === 'object' && 'id' in obj;
};

const addTitle = () => {
    let newTitle: Title = { value: '', language: '', type: '' };
    form.titles.push(newTitle);
};
const removeTitle = (key: any) => {
    form.titles.splice(key, 1);
};

const addDescription = () => {
    let newDescription = { value: '', language: '', type: '' };
    form.descriptions.push(newDescription);
};
const removeDescription = (key: any) => {
    form.descriptions.splice(key, 1);
};

const onAddAuthor = (person: Person) => {
    if (form.authors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as author' }, 4000);
    } else if (form.contributors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as contributor' });
    } else {
        form.authors.push(person);
        notify({ type: 'info', text: 'person has been successfully added as author' });
    }
};

const onAddContributor = (person: Person) => {
    if (form.contributors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as contributor' }, 4000);
    } else if (form.authors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as author' }, 4000);
    } else {
        // person.pivot = { contributor_type: '' };
        // // person.pivot = { name_type: '', contributor_type: '' };
        form.contributors.push(person);
        notify({ type: 'info', text: 'person has been successfully added as contributor' }, 4000);
    }
};

const addKeyword = () => {
    let newSubject: Subject = { value: 'test', language: '', type: 'uncontrolled', dataset_count: 0 };
    //this.dataset.files.push(uploadedFiles[i]);
    form.subjects.push(newSubject);
};

const addReference = () => {
    let newReference = { value: '', label: '', relation: '', type: '' };
    //this.dataset.files.push(uploadedFiles[i]);
    form.references.push(newReference);
};

const removeReference = (key: any) => {
    form.references.splice(key, 1);
};

const onMapInitialized = (newItem: any) => {
    console.log(newItem);
};
</script>

<style scoped>
.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>
