<template>
  <form class="flex flex-col w-full" @submit.prevent="submit">
    <div class="flex flex-row gap-2 items-center border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
      <p class="text-lg font-semibold grow">{{ title }}</p>
      <Spinner v-if="status == 'loading'" />
      <SuccessCheckmark v-else-if="status == 'success'" />
      <FailureXMark v-else-if="status == 'failed'" />
      <div v-else-if="enableEdit" class="flex flex-row gap-2">
        <button type="submit" class="!w-fit !h-fit !p-0">
          <CheckIcon class="h-5 w-5 cursor-pointer" />
        </button>
        <button
          type="reset"
          class="!w-fit !h-fit !p-0"
          @click="
            enableEdit = false;
            $emit('reset');
          "
        >
          <XMarkIcon class="h-5 w-5 cursor-pointer" />
        </button>
      </div>
      <PencilSquareIcon
        v-else-if="can('create', 'management', 'setting')"
        class="h-5 w-5 cursor-pointer"
        @click="enableEdit = true"
      />
    </div>
    <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
      <slot :enableEdit="enableEdit"></slot>
    </div>
  </form>
</template>

<script setup lang="ts">
import FailureXMark from "@/components/FailureXMark.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import { useAbilityStore } from "@/stores/ability";
import { CheckIcon, PencilSquareIcon, XMarkIcon } from "@heroicons/vue/24/outline";
import { mapActions, mapState } from "pinia";
import { defineComponent } from "vue";
import type { PropType } from "vue";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    title: {
      type: String,
      required: true,
    },
    submitFunction: {
      type: Function as PropType<(e: any) => Promise<any>>,
      required: true,
    },
  },
  emits: ["reset"],
  data() {
    return {
      enableEdit: false as boolean,
      status: undefined as undefined | "loading" | "success" | "failed",
    };
  },
  computed: {
    ...mapState(useAbilityStore, ["can"]),
  },
  methods: {
    submit(e: any) {
      this.status = "loading";
      this.submitFunction(e)
        .then(() => {
          this.status = "success";
        })
        .catch(() => {
          this.status = "failed";
        })
        .finally(() => {
          setTimeout(() => {
            this.enableEdit = false;
            this.status = undefined;
          }, 2000);
        });
    },
  },
});
</script>
