<script setup>
import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";

const props = defineProps(['notes', 'isAddFormVisible', 'isOldNotesVisible', 'isLabelVisible']);
import { ref } from 'vue';
import { addCustomerNote, isCustomerSelected, showDeleteNoteDialog } from "@/components/shop/POSDepartmentProcess.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const newNote = ref('');
const showLabel = ref(false);
showLabel.value = props.isLabelVisible || false;
</script>

<template>
  <div>
    <RequiresPermission permission="list_customer_notes">
    <div class="field">
      <label class="label" v-if="(props.notes.length > 0 || props.isAddFormVisible !== undefined ? props.isAddFormVisible : true) && showLabel"> Kundebemærkninger</label>
      <div class="control mt-3" v-if="isOldNotesVisible">
        <div class="message" v-for="note in notes" :key="note.id">
          <div class="message-header">
            <p>{{ note.created_at }}</p>
            <RequiresPermission permission="delete_customer_note">
              <button class="delete" @click="showDeleteNoteDialog(note.id)"></button>
            </RequiresPermission>
          </div>
            <div class="message-body">
              {{ note.note }}
            </div>
        </div>
      </div>
      <RequiresPermission permission="add_customer_note">
        <div class="control mt-3" v-if="isAddFormVisible">
          <textarea class="textarea has-sharp-edges" v-model="newNote" />
          <button
              class="button is-dark is-fullwidth mt-3"
              @click="addCustomerNote(newNote)"
              v-if="isCustomerSelected() && newNote.length > 0"
          >
            Tilføj bemærkning
          </button>
        </div>
      </RequiresPermission>
    </div>
    </RequiresPermission>
  </div>
</template>

<style scoped>

</style>