<script setup>
import {defineProps, ref} from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
const props = defineProps({
  object: Object,
  loadList: Function,
  editFunction: Function,
  column: String,
  parseFunction: Function,
  virtualColumn: Boolean,
  permissionCheckFunction: {
    type: Function,
    default: () => {
      return SessionUser.canAccessSuperUser();
    }
  }
});

const clickEdit = () => {
  // If the virtual column is not set, then show the edit form
  if (!props.virtualColumn) {
    isLoading.value = true;
    props.editFunction(
        props.object.id,
        props.column,
        props.object[props.column],
        props.loadList
    ).then(() => {
      isLoading.value = false;
    });
  } else {
    isLoading.value = true;
    props.editFunction(props.object.id).then(() => {
      isLoading.value = false;
    });
    // if the props.column is set, then throw an error
    if (props.column) {
      throw new Error("The column should not be set when the virtual column is set");
    }
  }
}
const isLoading = ref(false);

//console.log(props);
</script>

<template>
  <td>
    <span v-if="!props.virtualColumn">{{ parseFunction ? parseFunction(props.object[props.column]) : props.object[props.column] }}</span>
    <span v-else>{{ parseFunction ? parseFunction(props.object) : props.object }}</span>
    <span class="ml-2" v-if="props.permissionCheckFunction()">
      <button class="button is-small is-transparent is-text" style="text-decoration-line: none;" @click="clickEdit" v-if="props.editFunction" :class="{'is-loading': isLoading}" :disabled="isLoading">
        <span class="icon">
          <i class="fas fa-edit"></i>
        </span>
      </button>
    </span>
  </td>
</template>

<style scoped>

</style>