<script setup>
const emit = defineEmits(['dismiss']);
import { state } from '../store.js';
import moment from 'moment';
function dismissShowingNodePositionHistory() {
    state.selectedNodePositionHistory = [];
    state.selectedNodeToShowPositionHistory = null;
    state.positionHistoryModalExpanded = false;
    emit('dismiss');
}
function onPositionHistoryQuickRangeClick(range) {
    // update position history time range
    switch(range){
        case "1h": {
            state.positionHistoryDateTimeFrom = moment().subtract(1, "hours").format('YYYY-MM-DDTHH:mm');
            state.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');
            break;
        }
        case "24h": {
            state.positionHistoryDateTimeFrom = moment().subtract(24, "hours").format('YYYY-MM-DDTHH:mm');
            state.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');
            break;
        }
        case "7d": {
            state.positionHistoryDateTimeFrom = moment().subtract(7, "days").format('YYYY-MM-DDTHH:mm');
            state.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');
            break;
        }
    }
}
</script>
<template>
    <!-- node position history modal -->
    <div class="relative z-sidebar" role="dialog" aria-modal="true">

        <!-- sidebar -->
        <transition
                enter-active-class="transition duration-300 ease-in-out transform"
                enter-from-class="translate-y-full"
                enter-to-class="translate-y-0"
                leave-active-class="transition duration-300 ease-in-out transform"
                leave-from-class="translate-y-0"
                leave-to-class="translate-y-full">
            <div v-show="state.selectedNodeToShowPositionHistory != null" class="fixed left-0 right-0 bottom-0">
                <div v-if="state.selectedNodeToShowPositionHistory != null" class="mx-auto w-screen max-w-md p-4">
                    <div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
                        <div>
                            <div class="flex p-2">
                                <div class="flex my-auto mr-3 space-x-2">
                                    <a href="javascript:void(0)" @click="state.positionHistoryModalExpanded = !state.positionHistoryModalExpanded" class="rounded-full">
                                        <div class="bg-gray-100 hover:bg-gray-200 p-1 rounded-full">
                                            <svg v-if="state.positionHistoryModalExpanded" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                            </svg>
                                            <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                                            </svg>
                                        </div>
                                    </a>
                                </div>
                                <div class="my-auto mr-auto font-bold">{{ state.selectedNodeToShowPositionHistory.short_name }} Position History</div>
                                <div class="flex my-auto ml-3 space-x-2">
                                    <a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodePositionHistory">
                                        <div class="bg-gray-100 hover:bg-gray-200 p-1 rounded-full">
                                            <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M18 6l-12 12"></path>
                                                <path d="M6 6l12 12"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div v-if="state.positionHistoryModalExpanded" class="divide-y border-t">

                                <!-- quick range -->
                                <div class="flex p-2 space-x-2">
                                    <button @click="onPositionHistoryQuickRangeClick('1h')" type="button" class="w-full bg-gray-100 rounded border shadow px-2 py-1 text-sm hover:bg-gray-200 text-center">1 Hour</button>
                                    <button @click="onPositionHistoryQuickRangeClick('24h')" type="button" class="w-full bg-gray-100 rounded border shadow px-2 py-1 text-sm hover:bg-gray-200 text-center">24 Hours</button>
                                    <button @click="onPositionHistoryQuickRangeClick('7d')" type="button" class="w-full bg-gray-100 rounded border shadow px-2 py-1 text-sm hover:bg-gray-200 text-center">7 Days</button>
                                </div>

                                <!-- manual range -->
                                <div class="p-2 space-y-1">

                                    <!-- from -->
                                    <div class="flex items-center">
                                        <label class="text-sm pr-1 min-w-12 text-right">From:</label>
                                        <input v-model="state.positionHistoryDateTimeFrom" type="datetime-local" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1">
                                    </div>

                                    <!-- to -->
                                    <div class="flex items-center">
                                        <label class="text-sm pr-1 min-w-12 text-right">To:</label>
                                        <input v-model="state.positionHistoryDateTimeTo" type="datetime-local" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1">
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>