<template>
  <!-- eslint-disable max-len -->
  <div>
    <div>
      <div v-if="!edit" class="input-group-prepend">
        <input
          class="form-control"
          type="text"
          name="currentField.name"
          id="currentField.id"
          v-model="display"
          disabled
        />
        <span
          v-if="mayEdit"
          @click="EditClick()"
          class="input-group-text spanCursor"
          style="color: #60CBEB"
        >
          <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
        </span>
      </div>
      <div v-if="edit" class="input-group-prepend">
        <!-- Text -->
        <input
          v-if="editType === 'text'"
          class="form-control"
          type="text"
          name="currentField.name"
          id="currentField.id"
          v-model="updatedDisplay"
        />
        <!-- Number -->
        <input
          v-if="editType === 'number'"
          class="form-control"
          type="number"
          name="currentField.name"
          id="currentField.id"
          v-model="updatedDisplay"
        />
        <!-- Selector -->
        <select
          v-if="editType === 'selector'"
          class="form-control"
          v-model="selectorSelection"
          @change="SelectorSelected"
        >
          <option value="0"></option>
          <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{
            item.description
          }}</option>
        </select>
        <!-- yesno -->
        <select v-if="editType === 'yesno'" class="form-control" @change="YesNoSelected">
          <option></option>
          <option value="yes">Yes</option>
          <option value="no">No</option>
        </select>
        <span @click="UpdateValue()" class="input-group-text spanCursor" style="color: #60CBEB">
          <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
        </span>
        <span @click="Close()" class="input-group-text spanCursor" style="color: #60CBEB">
          <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'propertyFieldEdit',
  props: {
    display: String,
    arrayObject: { type: Array, default: () => [] },
    canEdit: Boolean,
    editType: String,
    propertyName: String,
    propertyId: Number,
    userDefinedId: Number,
    isUDF: Boolean,
    isPropOverview: Boolean,
    arrayIndex: Number,
    arrayItemIndex: Number,
    mayEdit: Boolean,
  },
  data() {
    return {
      edit: false,
      selectorSelection: Object,
      updatedDisplay: '',
    };
  },
  methods: {
    EditClick() {
      this.edit = true;
    },
    Close() {
      this.edit = false;
    },
    SelectorSelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.updatedDisplay = this.arrayObject[item.target.options.selectedIndex - 1].description;
      }
    },
    YesNoSelected(item) {
      if (item.target.options.selectedIndex === 1) {
        this.updatedDisplay = 'Yes';
      }
      if (item.target.options.selectedIndex === 2) {
        this.updatedDisplay = 'No';
      }
    },
    UpdateValue() {
      this.edit = false;
      this.$emit('UpdateValue', {
        fieldName: this.propertyName,
        value: this.updatedDisplay,
        propertyId: this.propertyId,
        userDefinedId: this.userDefinedId,
        isUDF: this.isUDF,
        isPropOverview: this.isPropOverview,
        arrayIndex: this.arrayIndex,
        arrayItemIndex: this.arrayItemIndex,
      });
    },
  },
  mounted() {
    this.updatedDisplay = this.display;
  },
};
</script>
