<template>
  <div class="dest-mass-handling-row-container" @wheel="handleWheel">
    <div class="dest-mass-handling-row-checkbox">
      <checkbox :checked="row.selected" @checkbox-changed="updateCheckbox">
      </checkbox>
    </div>
    <div class="dest-mass-handling-row-material dest-mass-handling-row__cell--filterable"
         @click="action($event,'material')"
         @mousedown="handleMouseDown">
      <ph-package size="24"/>
      {{ row.material }}
    </div>
    <div class="dest-mass-handling-row-supplier dest-mass-handling-row__cell--filterable"
         @click="action($event,'supplier')"
         @mousedown="handleMouseDown">
      <flag :iso="row.supplierIso" />
      {{ row.supplier }}
    </div>
    <div class="dest-mass-handling-row-destination dest-mass-handling-row__cell--filterable"
         @click="action($event,'destination')"
         @mousedown="handleMouseDown">
      <ph-map-pin size="24"/>
      {{ row.destination }}
    </div>
    <div class="dest-mass-handling-row-applier"></div>
    <div class="dest-mass-handling-row-costs">

      <div class="text-container" :class="{disabled: disabled}">
        <input class="input-field"
               v-model="row.handling_costs"
               @blur="validateHandlingCost($event, 'handling')"
               autocomplete="off"
               :disabled="disabled"/>
      </div>
      <div>[EUR/HU]</div>
    </div>
    <div class="dest-mass-handling-row-costs">

      <div class="text-container" :class="{disabled: disabled}">
        <input class="input-field"
               v-model="row.repackaging_costs"
               @blur="validateHandlingCost($event, 'repackaging')"
               autocomplete="off"
               :disabled="disabled"/>
      </div>
      <div>[EUR/HU]</div>
    </div>
    <div class="dest-mass-handling-row-costs">

      <div class="text-container" :class="{disabled: disabled}">
        <input class="input-field"
               v-model="row.disposal_costs"
               @blur="validateHandlingCost($event, 'disposal')"
               autocomplete="off"
               :disabled="disabled"/>
      </div>
      <div>[EUR/HU]</div>
    </div>
  </div>
</template>
<script>

import Checkbox from "@/components/UI/Checkbox.vue";
import {PhFactory, PhMapPin} from "@phosphor-icons/vue";
import {parseNumberFromString} from "@/common.js";
import Flag from "@/components/UI/Flag.vue";

export default {
  name: "DestinationMassHandlingCostRow",
  components: {Flag, PhMapPin, PhFactory, Checkbox},
  emits: ['action', 'update-selected'],
  props: {
    row: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    handleMouseDown(event) {
      if (event.shiftKey || event.ctrlKey) {
        event.preventDefault();
      }
    },
    handleWheel(event) {
      if (event.ctrlKey) {
        event.preventDefault();
        window.scrollBy(0, event.deltaY);
      }
    },
    action(event, column) {

      if (event.ctrlKey && !event.shiftKey && (column === 'material' || column === 'supplier' || column === 'destination')) {
        this.$emit('action', {row: this.row, column: column, action: 'filter'});
      } else if (event.ctrlKey && event.shiftKey && (column === 'material' || column === 'supplier' || column === 'destination')) {
        this.$emit('action', {row: this.row, column: column, action: 'append'});
      }

    },
    updateCheckbox(value) {
      this.row.selected = value;
      this.$emit('update-selected', {id: this.row.id, selected: value});
    },
    validateHandlingCost(event, type) {
      const value = event.target.value == null ? null : parseNumberFromString(event.target.value, 2);
      const validatedValue = value == null ? null : Math.max(0, value);
      const stringified = validatedValue === null ? '' : validatedValue.toFixed();

      if(type === 'handling')
        this.row.handling_costs = validatedValue;
      else if(type === 'repackaging')
        this.row.repackaging_costs = validatedValue;
      else if(type === 'disposal')
        this.row = validatedValue;

      event.target.value = stringified;
    },

    toNode(node, limit = 5) {
      if (!node)
        return 'N/A';

      const name = node.name;
      const mappingId = node.external_mapping_id;
      const needsShortName = name.length > limit;
      const useMappingId = ((mappingId ?? null) !== null) && ((name ?? null) === null || needsShortName);
      const shortName = name?.substring(0, limit).concat("...") ?? 'N/A';
      return `${useMappingId ? mappingId.replace("_", " ") : (needsShortName ? shortName : name)}`;

    },
  }
}
</script>


<style scoped>

.input-field {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: #002F54;

  max-width: 6rem;
}

.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 0 auto;

  max-width: 8rem;

}

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


.text-container.disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  border-color: #f3f4f6;
}

.text-container.disabled input {
  cursor: not-allowed;
}


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

}


.dest-mass-handling-row-container {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  padding: 1.2rem 2.4rem;
  justify-content: flex-start;
  border-bottom: 0.16rem solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.dest-mass-handling-row-container:hover {
  background-color: rgba(107, 134, 156, 0.05);
}

.dest-mass-handling-row-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
}

.dest-mass-handling-row-material {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 14rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #6b7280;
}

.dest-mass-handling-row-applier {
  width: 7rem;
}

.dest-mass-handling-row-supplier {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 18rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #6b7280;
}

.dest-mass-handling-row-destination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 18rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #6b7280;
}

.dest-mass-handling-row-costs {
  width: 25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

</style>