<template>
  <div class="d-grid gap-2 my-3">
    <button
      class="btn btn-outline-primary text-start d-flex align-items-center"
      :class="{ active: subscriberFinal }"
      type="button"
      @click="
        subscribeTo(subscriberFinal ? 'unsubscribe' : 'subscribe', 'final')
      "
    >
      <i
        class="fa fa-fw me-2"
        :class="subscriberFinal ? 'fa-check-square-o' : 'fa-square-o'"
      ></i>
      <span>{{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}</span>
    </button>
    <button
      class="btn btn-outline-primary text-start d-flex align-items-center"
      :class="{ active: subscriberStep }"
      type="button"
      @click="subscribeTo(subscriberStep ? 'unsubscribe' : 'subscribe', 'step')"
    >
      <i
        class="fa fa-fw me-2"
        :class="subscriberStep ? 'fa-check-square-o' : 'fa-square-o'"
      ></i>
      <span>{{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}</span>
    </button>
  </div>
</template>

<script setup>
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
import { defineProps, defineEmits } from "vue";
import {
  trans,
  WORKFLOW_SUBSCRIBE_FINAL,
  WORKFLOW_SUBSCRIBE_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>
