<template>
  <div class="select-material-modal-container">
    <h3 class="sub-header">Select part number</h3>
    <div class="select-material-container">
      <div class="select-material-caption-column">Part number</div>
      <div class="select-material-input-column select-material-input-field-suppliername">
        <div class="select-material-input-field-suppliername-searchbar">
          <autosuggest-searchbar
              @selected="actionPartNumberSelect"
              :fetch-suggestions="fetchPartNumbers"
              :initial-value="partNumber"
              title-resolver="part_number"
              placeholder="Find part number"
              :activate-watcher="true"></autosuggest-searchbar>
        </div>
      </div>
      <div class="select-material-caption-column" v-if="materialSelected">Description</div>
      <div class="select-material-input-column select-material-input-field-address" v-if="materialSelected">
        {{ description }}
      </div>
      <div class="select-material-caption-column" v-if="materialSelected">HS Code</div>
      <div class="select-material-input-column" v-if="materialSelected">{{ hsCode }}</div>
      <div class="select-material-checkbox" v-if="materialSelected">
        <tooltip
            text="Tick to reload master data from database (if present) and overwrite current values.">
          <checkbox :checked="updateMasterData" @checkbox-changed="checkboxChanged">update master data</checkbox>
        </tooltip>
      </div>
      <div class="select-material-footer">
        <basic-button :show-icon="false" :disabled="disableAcceptButton" @click="action('accept')">OK</basic-button>
        <basic-button variant="secondary" :show-icon="false" @click="action('cancel')">Cancel</basic-button>
      </div>
    </div>
  </div>


</template>

<script>
import AutosuggestSearchbar from "@/components/UI/AutoSuggestSearchBar.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import Checkbox from "@/components/UI/Checkbox.vue";
import Flag from "@/components/UI/Flag.vue";
import {mapStores} from "pinia";
import {useMaterialStore} from "@/store/material.js";
import Tooltip from "@/components/UI/Tooltip.vue";

export default {
  name: "SelectMaterial",
  emits: ['close'],
  components: {Tooltip, Flag, Checkbox, BasicButton, AutosuggestSearchbar},
  props: {
    partNumber: {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapStores(useMaterialStore),
    disableAcceptButton() {
      return (this.selectedPartNumber === this.partNumber);
    },
    materialSelected() {
      return this.selectedMaterial != null;
    },
    description() {
      return this.selectedMaterial?.name ?? '';
    },
    hsCode() {
      return this.selectedMaterial?.hs_code ?? '';
    }
  },
  created() {
    this.selectedPartNumber = this.partNumber;
  },
  data() {
    return {
      selectedMaterial: null,
      selectedPartNumber: null,
      updateMasterData: true,
    }
  },
  methods: {
    checkboxChanged(value) {
      this.updateMasterData = value;
    },
    action(action) {
      this.$emit('close', {action: action, material: this.selectedMaterial, updateMasterData: this.updateMasterData});
    },
    actionPartNumberSelect(material) {
      this.selectedMaterial = material;
      this.selectedPartNumber = material.part_number;
    },
    async fetchPartNumbers(query) {
      const materialQuery = {searchTerm: query};
      await this.materialStore.setQuery(materialQuery);
      return this.materialStore.materials;
    },
  }
}
</script>


<style scoped>

.select-material-input-column {
  font-size: 1.4rem;
  color: #6b7280;
  max-width: 30rem;
}

.select-material-input-field-suppliername {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.select-material-input-field-suppliername-searchbar {
  flex: 1 1 auto;
  min-width: 50rem;
}

.select-material-modal-container {
  width: 60rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.select-material-container {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(3, fit-content(0));
  align-content: center;
  gap: 1.6rem;
}

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

.select-material-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}

.select-material-checkbox {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}

.select-material-input-field-address {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}


.supplier-address {
  font-size: 1.4rem;
  color: #6b7280;
  max-width: 30rem;
}
</style>