<template>
  <div class="dest-mass-quantity-row-container" @wheel="handleWheel">
    <div class="dest-mass-quantity-row-checkbox">
      <checkbox :checked="row.selected" @checkbox-changed="updateCheckbox">
      </checkbox>
    </div>
    <div class="dest-mass-quantity-row-material dest-mass-quantity-row__cell--filterable" @click="action($event,'material')"
         @mousedown="handleMouseDown">
      <ph-package size="24"/>
      {{ row.material }}
    </div>
    <div class="dest-mass-quantity-row-supplier dest-mass-quantity-row__cell--filterable" @click="action($event,'supplier')"
         @mousedown="handleMouseDown">
      <ph-factory size="24"/>
      {{ row.supplier }}
    </div>
    <div class="dest-mass-quantity-row-applier"></div>
    <div v-for="dest in row.destinations" class="dest-mass-quantity-row-dest" :key="dest.id">
      <ph-stack size="24"></ph-stack>
      <div class="text-container" :class="{disabled: disabled || dest.id === null}">
        <input class="input-field"
               v-model="dest.annual_amount"
               @blur="validateAnnualAmount($event, dest)"
               autocomplete="off"
               :disabled="disabled || dest.id === null"/>
      </div>
    </div>
  </div>
</template>

<script>
import Checkbox from "@/components/UI/Checkbox.vue";
import {PhFactory, PhPackage, PhStack} from "@phosphor-icons/vue";
import BasicBadge from "@/components/UI/BasicBadge.vue";
import InputField from "@/components/UI/InputField.vue";
import {parseNumberFromString} from "@/common.js";

export default {
  name: "DestinationMassQuantityRow",
  components: {PhStack, InputField, PhFactory, Checkbox},
  emits: ['update-selected', 'action'],
  props: {
    row: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    validateAnnualAmount(event, dest) {
      const value = event.target.value == null ? null : parseNumberFromString(event.target.value, 0);
      const validatedValue = value == null ? null : Math.max(0, value);
      const stringified = validatedValue === null ? '' : validatedValue.toFixed();

      dest.annual_amount = validatedValue;
      event.target.value = stringified;
    },
    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')) {
        this.$emit('action', {row: this.row, column: column, action: 'filter'});
      } else if (event.ctrlKey && event.shiftKey && (column === 'material' || column === 'supplier')) {
        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});
    },
    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-quantity-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-quantity-row-container:hover {
  background-color: rgba(107, 134, 156, 0.05);
}

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

.dest-mass-quantity-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-quantity-row-applier {
  width: 7rem;
}

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

.dest-mass-quantity-row-dest {
  width: 15rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
}

</style>