<template>
    <div class="btn-group" role="group">
        <button
            id="btnGroupDrop1"
            type="button"
            class="btn btn-misc dropdown-toggle"
            data-bs-toggle="dropdown"
            aria-expanded="false"
        >
            <template v-if="status === Statuses.PENDING">
                <span class="fa fa-hourglass"></span> {{ $t("Give_an_answer") }}
            </template>
            <template v-else-if="status === Statuses.ACCEPTED">
                <span class="fa fa-check"></span> {{ $t("Accepted") }}
            </template>
            <template v-else-if="status === Statuses.DECLINED">
                <span class="fa fa-times"></span> {{ $t("Declined") }}
            </template>
            <template v-else-if="status === Statuses.TENTATIVELY_ACCEPTED">
                <span class="fa fa-question"></span> {{ $t("Tentative") }}
            </template>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li v-if="status !== Statuses.ACCEPTED">
                <a
                    class="dropdown-item"
                    @click="changeStatus(Statuses.ACCEPTED)"
                    ><i class="fa fa-check" aria-hidden="true"></i>
                    {{ $t("Accept") }}</a
                >
            </li>
            <li v-if="status !== Statuses.DECLINED">
                <a
                    class="dropdown-item"
                    @click="changeStatus(Statuses.DECLINED)"
                    ><i class="fa fa-times" aria-hidden="true"></i>
                    {{ $t("Decline") }}</a
                >
            </li>
            <li v-if="status !== Statuses.TENTATIVELY_ACCEPTED">
                <a
                    class="dropdown-item"
                    @click="changeStatus(Statuses.TENTATIVELY_ACCEPTED)"
                    ><i class="fa fa-question"></i>
                    {{ $t("Tentatively_accept") }}</a
                >
            </li>
            <li v-if="status !== Statuses.PENDING">
                <a class="dropdown-item" @click="changeStatus(Statuses.PENDING)"
                    ><i class="fa fa-hourglass-o"></i>
                    {{ $t("Set_pending") }}</a
                >
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

const ACCEPTED = "accepted";
const DECLINED = "declined";
const PENDING = "pending";
const TENTATIVELY_ACCEPTED = "tentative";

const i18n = {
    messages: {
        fr: {
            Give_an_answer: "Répondre",
            Accepted: "Accepté",
            Declined: "Refusé",
            Tentative: "Accepté provisoirement",
            Accept: "Accepter",
            Decline: "Refuser",
            Tentatively_accept: "Accepter provisoirement",
            Set_pending: "Ne pas répondre",
        },
    },
};

export default defineComponent({
    name: "Answer",
    i18n,
    props: {
        calendarId: { type: Number, required: true },
        status: {
            type: String as PropType<
                "accepted" | "declined" | "pending" | "tentative"
            >,
            required: true,
        },
    },
    emits: {
        statusChanged(
            payload: "accepted" | "declined" | "pending" | "tentative",
        ) {
            return true;
        },
    },
    data() {
        return {
            Statuses: {
                ACCEPTED,
                DECLINED,
                PENDING,
                TENTATIVELY_ACCEPTED,
            },
        };
    },
    methods: {
        changeStatus: function (
            newStatus: "accepted" | "declined" | "pending" | "tentative",
        ) {
            console.log("changeStatus", newStatus);
            const url = `/api/1.0/calendar/calendar/${this.$props.calendarId}/answer/${newStatus}.json`;
            window
                .fetch(url, {
                    method: "POST",
                })
                .then((r: Response) => {
                    if (!r.ok) {
                        console.error("could not confirm answer", newStatus);
                        return;
                    }
                    console.log("answer sent", newStatus);
                    this.$emit("statusChanged", newStatus);
                });
        },
    },
});
</script>

<style scoped></style>
