<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  uuid: {
    type: String,
    required: true
  },
  name: {
    type: String,
    required: true
  }
})

const emit = defineEmits<{
  (e: 'delete', uuid: string): void
  (e: 'share', uuid: string): void
  (e: 'update', uuid: string, name: string): void
}>()

const isEditing = ref<boolean>(false);
const editingName = ref<string>("");

const editItem = () => {
  isEditing.value = true;
  editingName.value = props.name;
}

const shareItem = () => {
  emit('share', props.uuid);
}

const deleteItem = () => {
  emit('delete', props.uuid);
}

const updateItem = () => {
  const new_name = editingName.value;
  editingName.value = "";
  isEditing.value = false;
  emit('update', props.uuid, new_name);
}

const cancelUpdateItem = () => {
  editingName.value = "";
  isEditing.value = false;
}

</script>

<template>
  <div class="paperbox-item card">
    <div class="paperbox-item-words">
      <p v-show="!isEditing">{{ name }}</p>
      <div v-show="isEditing" class="control">
        <input v-model="editingName" class="input" type="text" />
      </div>
    </div>

    <div class="paperbox-item-icon control" v-show="!isEditing" @click="editItem">
      <a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-pen"></font-awesome-icon></span></a>
    </div>
    <div class="paperbox-item-icon control" v-show="!isEditing" @click="shareItem">
      <a class="button"><span class="icon is-small"><font-awesome-icon
            icon="fas fa-share"></font-awesome-icon></span></a>
    </div>
    <div class="paperbox-item-icon control" v-show="!isEditing" @click="deleteItem">
      <a class="button"><span class="icon is-small"><font-awesome-icon
            icon="fas fa-trash"></font-awesome-icon></span></a>
    </div>

    <div class="paperbox-item-icon control" v-show="isEditing" @click="updateItem">
      <button class="button"><span class="icon is-small"><font-awesome-icon
            icon="fas fa-check"></font-awesome-icon></span></button>
    </div>
    <div class="paperbox-item-icon control" v-show="isEditing" @click="cancelUpdateItem">
      <button class="button"><span class="icon is-small"><font-awesome-icon
            icon="fas fa-times"></font-awesome-icon></span></button>
    </div>
  </div>
</template>

<style scoped></style>
