<script>
import { defineNuxtComponent } from 'nuxt/app';
import utils from '~/assets/utils';

export default defineNuxtComponent({
    props: {
        modalState: {
            type: Boolean,
        },
        weatherData: {
            type: Object,
        },
        databaseLocations: {
            type: Object,
        },
        locID: {
            type: Number,
        },
        locations: {
            type: Object,
        },
        apiBaseURL: {
            type: String,
        },
    },
    data: () => ({
        apiURL: '',
        userId: 1,
        deleteBootstrapData: false,
    }),
    methods: {
        getDay(date) {
            return utils.getDay(date);
        },
        closeModal() {
            this.$emit('close-modal');
        },
        getWeatherIcon(wmoCode) {
            return utils.getWeatherIcon(wmoCode);
        },
        async removeLocID(input) {
            await this.$parent.removeLocID(input);
        },
        async deleteLocation(input) {
            this.apiURL = '';
            this.apiURL = `${this.apiBaseURL}/locations/${input}`;
            await this.$emit('close-modal');

            await this.removeLocID(input);
            await delete this.weatherData[input];

            if (this.deleteBootstrapData == true) {
                await fetch(`${this.apiBaseURL}/locations/${input}`, {
                    method: 'DELETE',
                    body: JSON.stringify({
                        id: input,
                        user: this.userId,
                    }),
                })
                    .then((res) => res.json())
                    .then(async (json) => {
                        console.log('Deleted: ' + input);
                    });
            }
            this.apiURL = '';
            await this.getDatabaseLocations();
        },
        async getDatabaseLocations() {
            await this.$parent.getDatabaseLocations();
        },
        async fetchWeatherData(bulk = false, location = null) {
            await this.$parent.fetchWeatherData(bulk, location);
        },
        displayNotification(type, input) {
            this.$parent.displayNotification(type, input);
        },
    },
    name: 'Delete Location',
    emits: ['close-modal'],
});

const delOpen = ref(false);

defineShortcuts({
    escape: {
        usingInput: true,
        whenever: [delOpen],
        handler: () => {
            delOpen.value = false;
        },
    },
});
</script>

<template>
    <div>
        <UModal
            :ui="{
                base: 'w-80 min-w-20 h-50 bg-opacity-0',
                overlay: {
                    base: 'fixed inset-0 transition-opacity',
                    background: 'bg-black bg-opacity-80',
                    transition: {
                        enter: 'ease-out duration-300',
                        enterFrom: 'opacity-0',
                        enterTo: 'opacity-100',
                        leave: 'ease-in duration-200',
                        leaveFrom: 'opacity-100',
                        leaveTo: 'opacity-0',
                    },
                },
            }"
            v-model="modalState"
            prevent-close
            :overlay="true"
            @close-prevented="closeModal"
            @close="closeModal"
        >
            <UCard
                :ui="{
                    background: 'bg-woodsmoke-950',
                    divide: '',
                    ring: '',
                    header: {
                        base: '',
                        padding: 'pb-3 px-4',
                    },
                    body: {
                        base: 'py-2 px-4',
                        padding: '',
                    },
                }"
            >
                <template #header>
                    <div class="flex items-center justify-between">
                        <h3 class="text-base font-semibold text-gray-200">Delete Location</h3>
                        <button
                            class="float-right text-justify text-md bg-shark-950 text-gray-200 hover:bg-linkwater-300 px-1 rounded-md"
                            @click="closeModal"
                        >
                            <UIcon name="i-heroicons-x-mark-16-solid" />
                        </button>
                    </div>
                </template>
                <div class="flex items-center">
                    <p class="text-base mx-auto text-center text-gray-200">
                        Remove the selected location ? ({{ this.weatherData[this.locID].data.location.name }})
                    </p>
                </div>
                <div class="flex items-center m-6">
                    <button
                        class="mx-auto text-center text-xs bg-linkwater-100 text-gray-900 hover:bg-linkwater-300 font-bold py-2 px-4 rounded-md"
                        @click="deleteLocation(this.locID)"
                    >
                        Yes
                    </button>
                    <button
                        class="mx-auto text-center text-xs bg-linkwater-100 text-gray-900 hover:bg-linkwater-300 font-bold py-2 px-4 rounded-md"
                        @click="closeModal"
                    >
                        No
                    </button>
                </div>
            </UCard>
        </UModal>
    </div>
</template>
