<template>
    <div class="d-grid gap-2 my-3">
        <button
            class="btn btn-misc"
            type="button"
            v-if="!subscriberFinal"
            @click="subscribeTo('subscribe', 'final')"
        >
            <i class="fa fa-check fa-fw"></i>
            {{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}
        </button>
        <button
            class="btn btn-misc"
            type="button"
            v-if="subscriberFinal"
            @click="subscribeTo('unsubscribe', 'final')"
        >
            <i class="fa fa-times fa-fw"></i>
            {{ trans(WORKFLOW_UNSUBSCRIBE_FINAL) }}
        </button>
        <button
            class="btn btn-misc"
            type="button"
            v-if="!subscriberStep"
            @click="subscribeTo('subscribe', 'step')"
        >
            <i class="fa fa-check fa-fw"></i>
            {{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}
        </button>
        <button
            class="btn btn-misc"
            type="button"
            v-if="subscriberStep"
            @click="subscribeTo('unsubscribe', 'step')"
        >
            <i class="fa fa-times fa-fw"></i>
            {{ trans(WORKFLOW_UNSUBSCRIBE_ALL_STEPS) }}
        </button>
    </div>
</template>

<script setup>
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
import { defineProps, defineEmits } from "vue";
import {
    trans,
    WORKFLOW_SUBSCRIBE_FINAL,
    WORKFLOW_UNSUBSCRIBE_FINAL,
    WORKFLOW_SUBSCRIBE_ALL_STEPS,
    WORKFLOW_UNSUBSCRIBE_ALL_STEPS,
} from "translator";

// props
const props = defineProps({
    entityWorkflowId: {
        type: Number,
        required: true,
    },
    subscriberStep: {
        type: Boolean,
        required: true,
    },
    subscriberFinal: {
        type: Boolean,
        required: true,
    },
});

//methods
const subscribeTo = (step, to) => {
    let params = new URLSearchParams();
    params.set("subscribe", to);

    const url =
        `/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` +
        params.toString();

    makeFetch("POST", url).then((response) => {
        emit("subscriptionUpdated", response);
    });
};

// emit
const emit = defineEmits(["subscriptionUpdated"]);
</script>

<style scoped></style>
