<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { ref, Ref } from 'vue';
import { mdiChartTimelineVariant } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import BaseButton from '@/Components/BaseButton.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import { MapOptions } from '@/Components/Map/MapOptions';
import { stardust } from '@eidellev/adonis-stardust/client';
import SearchMap from '@/Components/Map/SearchMap.vue';
import { OpensearchDocument } from '@/Dataset';

// const fitBounds: LatLngBoundsExpression = [
// 	[46.4318173285, 9.47996951665],
// 	[49.0390742051, 16.9796667823],
// ];

// const mapId = 'map';

// const coverage = {
// 	x_min: undefined,
// 	y_min: undefined,
// 	x_max: undefined,
// 	y_max: undefined,
// 	elevation_min: undefined,
// 	elevation_max: undefined,
// 	elevation_absolut: undefined,
// 	depth_min: undefined,
// 	depth_max: undefined,
// 	depth_absolut: undefined,
// 	time_min: undefined,
// 	time_max: undefined,
// 	time_absolut: undefined,
// };

// Replace with your actual data
const datasets: Ref<OpensearchDocument[]> = ref([]);
const openAccessLicences: Array<string> = ['CC-BY-4.0', 'CC-BY-SA-4.0'];

const mapOptions: MapOptions = {
    center: [48.208174, 16.373819],
    zoom: 3,
    zoomControl: false,
    attributionControl: false,
};
</script>

<template>
    <LayoutAuthenticated :showAsideMenu="false">
        <Head title="Map" />

        <!-- <section class="p-6" v-bind:class="containerMaxW"> -->
        <SectionMain>
            <SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Tethys Map" main>
                <!-- <BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
					label="Star on Gitea" color="contrast" rounded-full small /> -->
                <BaseButton :route-name="stardust.route('app.login.show')" label="Login" color="white" rounded-full small />
            </SectionTitleLineWithButton>

            <!-- <SectionBannerStarOnGitea /> -->

            <!-- <CardBox> -->
            <!-- <div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
				<DrawControlComponent ref="draw" :preserve="false" :mapId="mapId" :southWest="southWest"
					:northEast="northEast">
				</DrawControlComponent>
			</div> -->
            <SearchMap :datasets="datasets" :map-options="mapOptions"></SearchMap>

            <div d="search-result-list-wrapper" class="flex flex-wrap col-span-24 h-full">
                <div v-for="dataset in datasets" :key="dataset.id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">
                    <div class="bg-white rounded shadow p-6">
                        <h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
                            {{ dataset.title_output }}
                        </h3>
                        <!-- <h2 class="text-xl font-bold mb-2">{{ dataset.title_output }}</h2> -->
                        <p class="text-gray-700 mb-2">{{ dataset.abstract_output }}</p>
                        <div class="text-sm text-gray-600">
                            <div v-for="author in dataset.author" :key="author" class="mb-1">{{ author }}</div>
                        </div>
                        <div class="mt-4">
                            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                                {{ dataset.year }}
                            </span>
                            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                                {{ dataset.language }}
                            </span>
                        </div>
                        <p>
                            <span class="label"><i class="fas fa-file"></i> {{ dataset.doctype }}</span>
                            <!-- <span>Licence: {{ document.licence }}</span> -->
                            <span v-if="openAccessLicences.includes(dataset.licence)" class="label titlecase"
                                ><i class="fas fa-lock-open"></i> Open Access</span
                            >
                        </p>
                    </div>
                </div>
            </div>
        </SectionMain>
        <!-- </section> -->
    </LayoutAuthenticated>
</template>
