<template>
  <div class="container" @focusout="focusLost">
    <div class="caption-column">MEK_A [EUR]</div>
    <div class="input-column">
      <div class="text-container">
        <input :value="priceFormatted" @blur="validatePrice" class="input-field"
               autocomplete="off"/>
      </div>
    </div>
    <div class="caption-column">Oversea share [%]</div>
    <div class="input-column">
      <div class="text-container">
        <input :value="overSeaSharePercent" @blur="validateOverSeaShare" class="input-field"
               autocomplete="off"/>
      </div>
    </div>
    <div class="caption-column">Include FCA Fee</div>
    <div class="input-column">
      <tooltip text="Select if a additional FCA has to be added during calculation">
        <checkbox :checked="includeFcaFee" @checkbox-changed="updateIncludeFcaFee"></checkbox>
      </tooltip>
    </div>

  </div>
</template>

<script>


import Checkbox from "@/components/UI/Checkbox.vue";
import Tooltip from "@/components/UI/Tooltip.vue";
import {parseNumberFromString} from "@/common.js";

export default {
  name: "PriceEdit",
  components: {Tooltip, Checkbox},
  emits: ['update:price', 'update:overSeaShare', 'update:includeFcaFee', 'save'],
  props: {
    price: {
      required: true,
      validator: (value) => value === null || typeof value === 'number'
    },
    overSeaShare: {
      required: true,
      validator: (value) => value === null || typeof value === 'number',
    },
    includeFcaFee: {
      type: Boolean,
      required: true,
    }
  },
  computed: {
    priceFormatted() {
      return this.price?.toFixed(2) ?? '';
    },
    overSeaSharePercent() {
      return this.overSeaShare ? (this.overSeaShare * 100).toFixed(2) : '';
    }
  },
  methods: {
    focusLost(event) {
      if (!this.$el.contains(event.relatedTarget)) {
        this.$emit('save', 'price');
      }
    },
    validatePrice(event) {
      const value = parseNumberFromString(event.target.value, 2);
      const validatedValue = Math.max(0, value);

      if (validatedValue !== this.price) {
        this.$emit('update:price', validatedValue);
      }

      event.target.value = validatedValue.toFixed(2);
    },
    updateIncludeFcaFee(value) {
      this.$emit('update:includeFcaFee', value);
    },
    validateOverSeaShare(event) {
      const percentValue = parseNumberFromString(event.target.value, 4);

      const validatedPercent = Math.max(0, Math.min(100, percentValue));
      const validatedDecimal = validatedPercent / 100;

      if (validatedDecimal !== this.overSeaShare) {
        this.$emit('update:overSeaShare', validatedDecimal);
      }

      event.target.value = validatedPercent.toFixed(2);
    }
  }
}
</script>


<style scoped>

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1.6rem;
  flex: 1 1 auto;
}



.input-column {
  display: flex;
  justify-content: space-between;
  align-self: center;
  font-size: 1.4rem;
  font-weight: 300;
  color: #6b7280;
  flex: 1 1 auto;
}

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

.text-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 1 fit-content(80rem);
}

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

.caption-column {
  font-size: 1.4rem;
  font-weight: 500;
  align-self: center;
  justify-self: end;
  color: #001D33;
  text-wrap: nowrap;
}

</style>