<template>
  <div class="dest-mass-create-row-container">
      <div class="dest-mass-create-row-material"><ph-package size="24"/> {{ row.material }}</div>
    <div class="dest-mass-create-row-supplier">
      <ph-factory size="24"/>{{ row.supplier }}
    </div>
    <div v-for="dest in row.destinations" class="dest-mass-create-row-dest" :key="dest.id">
      <checkbox :checked="dest.selected" @checkbox-changed="updateCheckbox($event, dest.id)">
      </checkbox>
<!--      <basic-badge variant="secondary">{{ toNode(dest, 15) }}</basic-badge>-->

    </div>
  </div>
</template>

<script>

import Checkbox from "@/components/UI/Checkbox.vue";
import {PhFactory, PhPackage} from "@phosphor-icons/vue";
import BasicBadge from "@/components/UI/BasicBadge.vue";
import {mapStores} from "pinia";
import {useDestinationEditStore} from "@/store/destinationEdit.js";

export default {
  name: "DestMassCreateRow",
  components: {PhFactory, BasicBadge, PhPackage, Checkbox},
  emits: ['update-selected'],
  props: {
    row: {
      type: Object,
      required: true
    },
  },
  computed: {
    ...mapStores(useDestinationEditStore)

  },
  methods: {
    updateCheckbox(value, destId) {
      this.row.destinations.find(d => d.id === destId).selected = value;
      this.$emit('update-selected',{id: this.row.id, dest: destId, 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>

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

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

.dest-mass-create-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-create-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-create-row-dest {
  width: 15rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

</style>