<template>
  <div class="property-container">

    <div class="caption-column">
      <div class="caption-column-id">{{ property.name }}: </div>
      <div class="caption-column-name">{{ property.description }}</div>
<!--      <div class="caption-column-name"><basic-badge variant="grey">{{ property.external_mapping_id}}</basic-badge></div>-->
    </div>

    <div class="input-column">

      <div v-if="showTextField" :class="textContainerClasses">
        <input :disabled="disabled" @blur="validate('text', $event)" :class="inputFieldClasses" :value="currentValue"
               ref="textInputField"
               autocomplete="off"/>
      </div>

      <div v-if="showToggleSwitch" class="boolean-container">
        <toggle-switch v-model="currentValue" @change="validate('toggle', $event)" :disabled="disabled"></toggle-switch>
      </div>

      <div v-if="showDropDown" class="dropdown-container">
        <dropdown :disabled="disabled" :options="options" v-model:model-value="currentValue"
                  @change="validate('dropdown', $event)"
        ></dropdown>
      </div>
    </div>

    <div class="reset-button-container">
      <tooltip text="reset changes" :position="'left'" v-if="showResetButton">
        <icon-button icon="ArrowCounterClockwise" @click="resetProperty"></icon-button>
      </tooltip>
    </div>

  </div>
</template>

<script>

import InputField from "@/components/UI/InputField.vue";
import {PhGear} from "@phosphor-icons/vue";
import ToggleSwitch from "@/components/UI/ToogleSwitch.vue";
import Dropdown from "@/components/UI/Dropdown.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Tooltip from "@/components/UI/Tooltip.vue";
import {parseNumberFromString} from "@/common.js";
import BasicBadge from "@/components/UI/BasicBadge.vue";

export default {
  name: "Property",
  components: {BasicBadge, Tooltip, IconButton, Dropdown, ToggleSwitch, PhGear, InputField},
  props: {
    property: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    showTextField() {
      return !(this.showDropDown || this.showToggleSwitch);
    },
    showDropDown() {
      return this.property.data_type === 'ENUMERATION';
    },
    showToggleSwitch() {
      return this.property.data_type === 'BOOLEAN';
    },
    showResetButton() {
      return this.property.current_value !== this.property.draft_value && this.property.draft_value !== null;
    },
    currentValue: {
      get() {
        if (this.property.data_type === 'INT')
          return this.value.toFixed();
        if (this.property.data_type === 'PERCENTAGE')
          return `${(this.value * 100).toFixed(2)}%`;
        if (this.property.data_type === 'CURRENCY')
          return `${(this.value).toFixed(2)}€`;

        return this.value;
      },
      set(value) {

      }
    },
    textContainerClasses() {
      return this.disabled ? 'text-container--disabled' : 'text-container';
    },
    inputFieldClasses() {
      return this.disabled ? 'input-field--disabled' : 'input-field';
    },
  },
  data() {
    return {
      options: {},
      value: null,
      parsedText: null,
      validationRule: null,
    }
  },
  created() {
    if (this.property === null) return;
    this.initialProcessing();
  },
  methods: {
    validate(type, event) {
      let emitEvent = false;

      if (type === 'text') {

        if (this.property.data_type === 'CURRENCY' || this.property.data_type === 'PERCENTAGE' || this.property.data_type === 'INT') {
          const parsed = parseNumberFromString(event.target.value, (this.property.data_type === 'INT') ? 0 : 2) * ((this.property.data_type === 'PERCENTAGE') ? 0.01 : 1);
          emitEvent = (parsed !== this.value);
          this.value = parsed;
          this.updateInputValue();
        } else if (this.property.data_type === 'TEXT') {
          emitEvent = (event.target.value !== this.value);
          this.value = event.target.value;
        }

      } else if (type === 'toggle') {
        emitEvent = (event !== this.value);
        this.value = event;
      } else if (type === 'dropdown') {
        emitEvent = (event.value !== this.value);
        this.value = event.value;
      }

      if (emitEvent)
        this.$emit('save', {id: this.property.external_mapping_id, value: this.value, reset: false});


    },
    updateInputValue() {
      this.$nextTick(() => {
        if (this.$refs["textInputField"] && this.$refs["textInputField"].value !== this.currentValue) {
          this.$refs["textInputField"].value = this.currentValue;
        }
      });
    },
    getEnum(rule) {
      const options = [];
      const enumValues = rule['ENUM'];

      for (const value of enumValues) {
        const option = {
          id: value,
          value: value,
        }

        options.push(option);
      }

      return options;
    },
    resetProperty() {
      this.property.draft_value = null;
      this.initialProcessing();

      this.$emit('save', {id: this.property.external_mapping_id, value: this.value, reset: true});

    },
    initialProcessing() {
      this.validationRule = JSON.parse(this.property.validation_rule);
      this.value = this.property.draft_value === null ? this.property.current_value : this.property.draft_value;

      if (this.property.data_type === 'ENUMERATION') {
        this.options = this.getEnum(this.validationRule);
      }

      if (this.property.data_type === 'BOOLEAN') {
        this.value = this.value === 'true';
      }

      if (this.property.data_type === 'INT') {
        this.value = parseNumberFromString(this.value, 0);
      }

      if (this.property.data_type === 'PERCENTAGE') {
        this.value = parseNumberFromString(this.value, 4);
      }

      if (this.property.data_type === 'CURRENCY') {
        this.value = parseNumberFromString(this.value, 2);
      }
    }
  }
}
</script>

<style scoped>

.property-container {
  display: grid;
  grid-template-columns: 3fr 1fr 0.5fr;
  align-items: center;
  gap: 2.4rem;
  height: 8rem;
  margin: 3.6rem 0 ;
}

.caption-column {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  font-size: 1.4rem;
  max-width: 60rem;
}

.caption-column-id {
  font-weight: 500;
  font-size: 1.4rem;
}

.caption-column-name {
  font-weight: 400;
  font-size: 1.4rem;
  color: #6b7280;
}

.input-column {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 300;
  color: #6b7280;
}

.text-container--disabled {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: 0.2rem solid rgba(227, 237, 255, 0.5);
  color: rgba(0, 47, 84, 0.3);
  transition: all 0.1s ease;
  width: 100%;
  max-width: 30rem;
  min-width: 20rem;
}

.text-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  width: 100%;
  max-width: 30rem;
  min-width: 20rem;
}

.text-container:hover {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  transform: scale(1.01);
}

.boolean-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 30rem;
  min-width: 20rem;
}

.dropdown-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 30rem;
  min-width: 20rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.input-field {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: #002F54;
  width: 100%;
  min-width: 5rem;
  max-width: 100rem;
}


.input-field--disabled {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: rgba(0, 47, 84, 0.5);
  width: 100%;
  min-width: 5rem;
  max-width: 100rem;
  cursor: not-allowed;
}


.reset-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
}

</style>