<template>
  <div class="entry-edit">
    <form
      v-if="isEditTitle && !isDisabled"
      @submit.prevent="isEditTitle = false"
      class="edit-form"
    >
      <div class="wrapper-input">
        <Input
          :text="text || ''"
          :placeholder="$t('pages.upload.edit_placeholder_input')"
          @input="changeTextValue"
        />
        <div class="close-button">
          <Button
            id="close-button"
            look="no-text-white"
            icon="bi bi-x"
            @trigger="closeEdition"
          />
        </div>
      </div>
      <Button
        id="valid-button"
        :text="$t('pages.upload.ok_button')"
        type="submit"
        look="button button--blue"
        @trigger="validNewName"
      />
    </form>
    <span v-else class="title">{{ text }}</span>
    <div v-if="!isEditTitle" class="edit-button">
      <Button
        look="no-text"
        icon="bi bi-pen"
        :tooltip="$t('pages.upload.edit_title_tooltip')"
        :disabled="isDisabled"
        @trigger="goToEditMode"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import Button from '@/components/Button.vue'
import Input from '@/components/Input.vue'

const emit = defineEmits<{
  (e: 'triggerNewText', value: string | null): void
}>()
const props = defineProps({
  defaultText: { type: String, default: null },
  isLoading: { type: Boolean, default: false },
  isLoaded: { type: Boolean, default: false }
})
let titleToEdit = ref<string | null>(null)
let isEditTitle = ref<boolean>(false)

function changeTextValue(value: string): void {
  titleToEdit.value = value
}
function closeEdition(): void {
  isEditTitle.value = false
  titleToEdit.value = null
}
function validNewName(): void {
  emit('triggerNewText', titleToEdit.value)
  isEditTitle.value = false
}
function goToEditMode(): void {
  isEditTitle.value = true
  titleToEdit.value = props.defaultText
}

const text = computed<string | null>(() => {
  if (isEditTitle.value) return titleToEdit.value
  if (props.defaultText) return props.defaultText
  return null
})

const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
</script>

<style scoped lang="scss">
.title {
  color: var(--blue-dark);
}
.entry-edit {
  display: flex;
  align-items: center;
  margin-bottom: toRem(2);
  width: 100%;
  height: toRem(4.7);
}
.wrapper-edit {
  display: flex;
  align-items: center;
  margin-bottom: toRem(1);
  width: 100%;
}
.edit-button {
  background-color: var(--grey);
  border-radius: 50%;
  height: toRem(3.5);
  width: toRem(3.5);
  padding: toRem(1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: toRem(1.5);
}
.wrapper-input {
  position: relative;
  margin-right: toRem(1.5);
  width: 100%;
}
.edit-form {
  width: 100%;
  display: flex;
  align-items: center;
}
.close-button {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: toRem(2);
  width: toRem(2);
  top: toRem(-1);
  right: toRem(-1);
  background-color: var(--blue-dark);
  color: var(--white);
  border-radius: 50%;
}
</style>
