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

export default defineNuxtComponent({
    props: {
        modalState: {
            type: Boolean,
        },
        weatherData: {
            type: Object,
        },
        locID: {
            type: Number,
        },
    },
    data: () => ({
        weatherIcons: utils.weatherIcons,
    }),
    methods: {
        getDay(date) {
            return utils.getDay(date);
        },
        closeModal() {
            this.$emit('close-modal');
        },
        getWeatherIcon(wmoCode) {
            return utils.getWeatherIcon(wmoCode);
        },
    },
    name: 'Slideover Details',
    emits: ['close-modal'],
});

const detailsOpen = ref(false);

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

<template>
    <div>
        <USlideover
            :ui="{
                base: 'min-w-100 min-h-70 h-full',
                background: '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',
                    },
                },
            }"
            prevent-close
            v-model="modalState"
            :overlay="true"
            @close-prevented="closeModal"
            @close="closeModal"
        >
            <UCard
                :ui="{
                    background: 'bg-woodsmoke-950 h-full',
                    divide: '',
                    ring: '',
                    preventClose: True,
                    header: {
                        base: '',
                        padding: 'pb-3',
                    },
                    body: {
                        base: 'pt-2 px-6 pb-4',
                        padding: '',
                    },
                }"
            >
                <template #header>
                    <div class="flex items-center justify-between">
                        <p class="text-2xl px-2 font-semibold text-gray-200">
                            {{ this.weatherData[this.locID].data.location.name }}
                        </p>
                        <button
                            class="float-right rounded-sm text-justify text-md bg-shark-950 text-gray-200 hover:bg-linkwater-300 px-1"
                            @click="closeModal"
                        >
                            <UIcon class="mt-1" name="i-heroicons-x-mark-16-solid" />
                        </button>
                    </div>
                </template>

                <p class="text-sm text-silver-400 pb-4">This Week</p>
                <div class="mb-4 mx-1" v-for="index in 7" :key="index">
                    <div class="container grid grid-cols-3 py-5 bg-mineshaft-900 text-gray-200 px-5 rounded-3xl">
                        <div class="mt-2 col-span-2 text-left items-start">
                            <img
                                class="float-left w-10 mr-3"
                                :src="getWeatherIcon(this.weatherData[this.locID].data.daily.weather_code[index - 1])"
                                alt="weather icon"
                            />
                            <div class="items-start text-left py-1 align-middle">
                                <strong class="text-left text-3xl font-semibold font-sans align-middle">
                                    {{ getDay(this.weatherData[this.locID].data.daily.date[index - 1]) }}
                                </strong>
                            </div>
                        </div>

                        <div class="text-right">
                            <div class="float-right">
                                <span class="text-md text-silver-500 mx-4">Min.</span>
                                <span class="text-md"
                                    ><strong class="mr-1 text-silver-200">
                                        {{
                                            Math.ceil(
                                                this.weatherData[this.locID].data.daily.temperature_2m_min[index - 1]
                                            )
                                        }}°C
                                    </strong>
                                </span>
                            </div>
                            <div class="float-right mt-2">
                                <span class="text-md text-silver-500 mx-4">Max.</span>
                                <span class="text-md"
                                    ><strong class="mr-1 text-silver-200">
                                        {{
                                            Math.ceil(
                                                this.weatherData[this.locID].data.daily.temperature_2m_max[index - 1]
                                            )
                                        }}°C
                                    </strong>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </UCard>
        </USlideover>
    </div>
</template>
