<template>
    <div class="popup">
        <div class="TrainerNewTime" @click.stop>
            <VDatePicker class="dateSelector" v-model.range="range" mode="datetime" :rules="datePickerRules" is24hr
                timezone="utc" :input-debounce="50" />
            <div class="submitButton" @click="selectTimeslot()">
                Vælg
            </div>
            <div class="closeButton" @click="$emit('closePopup')">x</div>
        </div>
    </div>
</template>

<script lang="ts">
import type { Timeslot } from '@/interfaces/timeslot';
import type { Order } from '@/interfaces/order';
import type { PropType } from 'vue';
import dayjs from 'dayjs';
import LocalizedFormat from "dayjs/plugin/localizedFormat"
import utc from "dayjs/plugin/utc"
import { } from "dayjs/locale/da";

dayjs.extend(LocalizedFormat);
dayjs.extend(utc);

export default {
    name: "Home",
    emits: ["closePopup", "refreshList"],
    props: {
        order: {
            type: Object as PropType<Order>,
            required: true
        }
    },
    data() {
        return {
            range: {
                start: dayjs().set("minute", 0).toDate(),
                end: dayjs().set("minute", 0).toDate()
            },
            datePickerRules: {
                seconds: 0,
                milliseconds: 0
            },
            timeslots: [] as Timeslot[]
        }
    },
    methods: {
        async selectTimeslot() {
            const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/trainer/order/${this.order.id}`, {
                credentials: import.meta.env.DEV ? "include" : undefined,
                method: "PUT",
                body: JSON.stringify({ startDate: this.range.start, endDate: this.range.end }),
                headers: {
                    "Content-Type": "Application/json"
                }
            });
            if (res.status === 401) {
                this.$router.push({ path: "/login", query: { ref: this.$route.path } });
            }
            else if (res.status === 400) {
                const data = await res.json();
                alert(data[0].message)
            }
            else if (res.status === 204) {
                this.$emit("refreshList");
                this.$emit("closePopup");
            }
        }
    }
}
</script>

<style scoped>
.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.TrainerNewTime {
    background-color: white;
    border-radius: 0.5rem;
    padding: 50px;
    margin: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.closeButton {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2em;
    cursor: pointer;
}

.closeButton:hover {
    text-decoration: underline;
}

.submitButton {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 10px;
    cursor: pointer;
    font-size: 1.25em;
}

.submitButton:hover {
    text-decoration: underline;
    border-color: black;
}
</style>