<template>
  <div class="destination-edit-handling-cost">
    <div class="destination-edit-handling-cost-info">
      <ph-warning size="18px"></ph-warning>
      Handling and repackaging costs are calculated automatically.
      If needed, you can overwrite these values here.
    </div>
    <div>
      <checkbox :checked="inputFieldsActive" @checkbox-changed="activateInputFields">I want to enter handling and
        repackaging costs manually.
      </checkbox>
    </div>
    <div class="destination-edit-handling-cost-container" v-show="inputFieldsActive">
      <div class="destination-edit-column-caption">Repackaging cost [EUR/HU]</div>
      <div class="destination-edit-column-data">
        <div class="text-container">
          <input :value="repackaging" @blur="validate('repackaging', $event)" class="input-field"
                 autocomplete="off"/>
        </div>
      </div>
      <div class="destination-edit-column-caption">Handling cost [EUR/HU]</div>
      <div class="destination-edit-column-data">
        <div class="text-container">
          <input :value="handling" @blur="validate('handling', $event)" class="input-field"
                 autocomplete="off"/>
        </div>
      </div>
      <div class="destination-edit-column-caption">Disposal cost [EUR/HU]</div>
      <div class="destination-edit-column-data">
        <div class="text-container">
          <input :value="disposal" @blur="validate('disposal', $event)" class="input-field"
                 autocomplete="off"/>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

import Checkbox from "@/components/UI/Checkbox.vue";
import {mapStores} from "pinia";
import {parseNumberFromString} from "@/common.js";
import {useDestinationSingleEditStore} from "@/store/destinationSingleEdit.js";
import logger from "@/logger.js";

export default {
  name: "DestinationEditHandlingCost",
  components: {Checkbox},
  created() {
    logger.log("Destination:", this.destination)
  },
  computed: {
    ...mapStores(useDestinationSingleEditStore),
    destination() {
      return this.destinationSingleEditStore.destination;
    },
    repackaging: {
      get() {
        return this.destination?.repackaging_costs?.toFixed(2) ?? '0.00';
      },
      set(value) {
        return this.destination && (this.destination.repackaging_costs = value);
      }
    },
    handling: {
      get() {
        return this.destination?.handling_costs?.toFixed(2) ?? '0.00';
      },
      set(value) {
        return this.destination && (this.destination.handling_costs = value);
      }
    },
    disposal: {
      get() {
        return this.destination?.disposal_costs?.toFixed(2) ?? '0.00';
      },
      set(value) {
        return this.destination && (this.destination.disposal_costs = value);
      }
    },
    inputFieldsActive: {
      get() {
        return this.destination?.userDefinedHandlingCosts ?? false;
      },
      set(value) {
        this.destination && (this.destination.userDefinedHandlingCosts = value);
      }
    }
  },
  methods: {
    activateInputFields(value) {
      if (value !== this.inputFieldsActive) {
        this.inputFieldsActive = value;
        this.destination.userDefinedHandlingCosts = value;
      }
    },
    validate(field, event) {
      const value = parseNumberFromString(event.target.value, 2);
      const validatedValue = Math.max(0, value);
      const stringified = validatedValue.toFixed(2);

      if (stringified !== this[field]) {
        this.destination[`${field}_costs`] = validatedValue;
      }
      event.target.value = stringified;
    }
  }
}
</script>


<style scoped>

.destination-edit-handling-cost {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: flex-start;
  margin: 1.6rem;
}

.destination-edit-handling-cost-info {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  gap: 1.6rem;
  background-color: #c3cfdf;
  color: #002F54;
  border-radius: 0.8rem;
  padding: 1.6rem;
}


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

.destination-edit-handling-cost-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(4, auto);
  gap: 1.6rem;
  width: 100%;
}

.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;
  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: scale(1.01);
}

</style>