<script setup>
import { ref } from 'vue'
import BookListElement from './BookListElement.vue'

const props = defineProps({
  isDragover: Boolean,
  id: Number,
  position: Number,
  book: Array,
})

const emit = defineEmits('positionchange')

const vFocus = {
  mounted: (el) => el.focus(),
}

const isInputtingPosition = ref(false)
const inputtedPosition = ref('')

function onPositionInput() {
  if (inputtedPosition.value != '' && !isNaN(inputtedPosition.value)) {
    const parsedPosition = parseInt(inputtedPosition.value)
    if (parsedPosition != props.position) {
      emit('positionchange', parsedPosition)
    }
  }
  clearPositionInput()
}

function clearPositionInput() {
  isInputtingPosition.value = false
  inputtedPosition.value = ''
}
</script>
<template>
  <div :class="isDragover ? 'dragover' : ''" draggable="true" class="collectionitembox">
    <BookListElement v-bind="props.book">
      <div class="separator" />
      <div class="centered">
        <div
          v-if="!isInputtingPosition"
          @click="isInputtingPosition = true"
          class="positionindicator centered is-narrow clickable"
        >
          {{ props.position }}
        </div>
        <div v-else>
          <input
            type="text"
            v-model="inputtedPosition"
            v-focus
            @blur="clearPositionInput"
            @keyup.enter="onPositionInput"
            size="1"
            class="positioninput"
            :placeholder="props.position"
          />
        </div>
      </div>
      <div class="separator" />
      <div class="positionwidget centered is-narrow">
        <b-icon-list />
      </div>
    </BookListElement>
  </div>
</template>

<style scoped>
.collectionitembox {
  transition: ease-in-out 0.04s;
  display: flex;
}

.collectionitembox:hover {
  transform: scale(1.01);
  transition: ease-in-out 0.02s;
}

.separator {
  width: 5px;
  background: var(--bulma-scheme-main);
}

.positionindicator {
  font-size: 36px;
  margin-left: 40px;
  margin-right: 40px;
}

.positioninput {
  font-size: 36px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  background: var(--bulma-scheme-main);
  border-radius: 10%;
  color: var(--bulma-body-color);
}

.positionwidget {
  color: var(--bulma-scheme-main);
  font-size: 48px;
  margin-left: 30px;
  margin-right: 30px;
  border-top-right-radius: var(--bulma-box-radius);
  border-bottom-right-radius: var(--bulma-box-radius);
  cursor: grab;
}

.positionwidget:active {
  cursor: grabbing;
}

.dragover {
  border: 3px solid var(--bulma-primary);
  border-radius: 10px;
}
</style>
