<template>
  <div class="edit-calculation-container" :class="{ 'has-selection': hasSelection }">
    <div class="header-container">
      <h2 class="page-header">Mass edit calculation</h2>
      <div class="header-controls">
        <basic-button :show-icon="false"
                      :disabled="premiseEditStore.selectedLoading"
                      variant="secondary"
                      @click="closeMassEdit"
        >Close
        </basic-button>
        <basic-button :show-icon="true"
                      :disabled="premiseEditStore.selectedLoading"
                      icon="Calculator" variant="primary"
                      @click="startCalculation"
        >Calculate & close
        </basic-button>

      </div>
    </div>

    <transition name="list-edit-container" tag="div">
      <transition-group name="list-edit" mode="out-in" class="edit-calculation-list-container" tag="div">

        <div class="edit-calculation-list-header" key="header">
          <div>
            <checkbox @checkbox-changed="updateCheckBoxes" :checked="overallCheck"></checkbox>
          </div>
          <div>Material</div>
          <div>Price</div>
          <div>Packaging</div>
          <div>Supplier</div>
          <div>Destinations & routes</div>
          <div>Actions</div>
        </div>


        <div v-if="showLoading" class="spinner-container" key="spinner">
          <spinner class="space-around"></spinner>
        </div>

        <div v-else-if="showEmpty" class="empty-container" key="empty">
          <span class="space-around">No Calculations found.</span>
        </div>

        <bulk-edit-row v-else class="edit-calculation-list-item" v-for="premise of this.premiseEditStore.getPremisses"
                       :key="premise.id" :id="premise.id" :premise="premise" @action="onClickAction">
        </bulk-edit-row>


      </transition-group>
    </transition>


    <modal :z-index="3000" :state="showProcessingModal">
      <div class="edit-calculation-spinner-container space-around">
        <spinner></spinner>
        <span>{{ processingMessage }}</span>
      </div>
    </modal>

    <mass-edit-dialog v-if="showData" :show="showMultiselectAction" @action="multiselectAction"
                      :select-count="selectCount"></mass-edit-dialog>


    <modal :z-index="2000" :state="showEditModal">
      <div class="modal-content-container">
        <component
            :is="componentType"
            v-model:partNumber="componentProps.partNumber"
            v-model:hsCode="componentProps.hsCode"
            v-model:tariffRate="componentProps.tariffRate"
            v-model:description="componentProps.description"
            v-model:price="componentProps.price"
            v-model:overSeaShare="componentProps.overSeaShare"
            v-model:includeFcaFee="componentProps.includeFcaFee"
            v-model:length="componentProps.length"
            v-model:width="componentProps.width"
            v-model:height="componentProps.height"
            v-model:weight="componentProps.weight"
            v-model:weightUnit="componentProps.weightUnit"
            v-model:dimensionUnit="componentProps.dimensionUnit"
            v-model:unitCount="componentProps.unitCount"
            v-model:mixable="componentProps.mixable"
            v-model:stackable="componentProps.stackable"
            v-model:preSelectedNode="componentProps.preSelectedNode"
            v-model:openSelectDirect="componentProps.openSelectDirect"
            @update-material="updateMaterial"
            @update-supplier="updateSupplier"
            @close="closeEditModalAction('cancel')"

        >
        </component>
        <div class="modal-content-footer" v-if="showModalFooter">
          <basic-button :show-icon="false" @click="closeEditModalAction('accept')">OK</basic-button>
          <basic-button variant="secondary" :show-icon="false" @click="closeEditModalAction('cancel')">Cancel
          </basic-button>
        </div>
      </div>
    </modal>

  </div>
</template>

<script>

import {UrlSafeBase64} from "@/common.js";
import {mapStores} from "pinia";
import {usePremiseEditStore} from "@/store/premiseEdit.js";
import BasicButton from "@/components/UI/BasicButton.vue";
import BulkEditRow from "@/components/layout/bulkedit/BulkEditRow.vue";
import Checkbox from "@/components/UI/Checkbox.vue";
import CalculationListItem from "@/components/layout/calculation/CalculationListItem.vue";
import Spinner from "@/components/UI/Spinner.vue";
import ListEdit from "@/components/UI/ListEdit.vue";
import MassEditDialog from "@/components/UI/MassEditDialog.vue";
import Modal from "@/components/UI/Modal.vue";
import PriceEdit from "@/components/layout/edit/PriceEdit.vue";
import MaterialEdit from "@/components/layout/edit/MaterialEdit.vue";
import PackagingEdit from "@/components/layout/edit/PackagingEdit.vue";
import DestinationListView from "@/components/layout/edit/DestinationListView.vue";
import SelectNode from "@/components/layout/node/SelectNode.vue";


const COMPONENT_TYPES = {
  price: PriceEdit,
  material: MaterialEdit,
  packaging: PackagingEdit,
  supplier: SelectNode,
  destinations: DestinationListView,
}

export default {
  name: "MassEdit",
  components: {Modal, MassEditDialog, ListEdit, Spinner, CalculationListItem, Checkbox, BulkEditRow, BasicButton},
  computed: {
    ...mapStores(usePremiseEditStore),
    hasSelection() {
      if (this.premiseEditStore.isLoading || this.premiseEditStore.selectedLoading) {
        return false;
      }
      return this.premiseEditStore.getSelectedPremissesIds?.length > 0;
    },
    selectCount() {
      return this.selectedPremisses?.length ?? 0;
    },
    selectedPremisses() {
      return this.premiseEditStore.getSelectedPremisses;
    },
    showEmpty() {
      return this.premiseEditStore.showEmpty;
    },
    showLoading() {
      return this.premiseEditStore.isLoading;
    },
    showData() {
      return this.premiseEditStore.showData;
    },
    overallCheck() {
      return this.premiseEditStore.isLoading ? false : this.premiseEditStore.getPremisses?.every(p => p.selected === true) ?? false;
    },
    showMultiselectAction() {
      return this.selectCount > 0;
    },
    showModalFooter() {
      return this.modalType !== 'supplier';
    },
    showEditModal() {
      return ((this.modalType ?? null) !== null);
    },
    componentProps() {
      return this.componentData?.props ?? null;
    },
    componentType() {
      return this.modalType ? COMPONENT_TYPES[this.modalType] : null;
    },
    componentData() {
      return this.modalType ? this.componentsData[this.modalType] : null;
    },
    showProcessingModal() {
      return this.premiseEditStore.showProcessingModal;
    }
  },
  created() {
    this.bulkQuery = this.$route.params.ids;
    this.ids = new UrlSafeBase64().decodeIds(this.$route.params.ids);
    this.premiseEditStore.loadPremissesIfNeeded(this.ids);
  },
  data() {
    return {
      ids: [],
      bulkQuery: null,
      modalType: null,
      componentsData: {
        price: {props: {price: 0, overSeaShare: 0, includeFcaFee: true}},
        material: {props: {partNumber: "", hsCode: "", tariffRate: 0.00, description: "", openSelectDirect: true}},
        packaging: {
          props: {
            length: 0,
            width: 0,
            height: 0,
            weight: 0,
            weightUnit: "KG",
            dimensionUnit: "MM",
            unitCount: 1,
            mixable: true,
            stackable: true
          }
        },
        supplier: {
          props: {
            preSelectedNode: null,
            openSelectDirect: false
          }
        },
        destinations: {props: {}},
      },
      editIds: null,
      dataSourceId: null,
      processingMessage: "Please wait. Calculating routes ...",
    }
  },
  methods: {
    startCalculation() {
      this.premiseEditStore.startCalculation();
    },
    closeMassEdit() {
      this.$router.push({name: "calculation-list"});
    },
    async updateSupplier(data) {
      console.log("update supplier", data.nodeId, data.action, data.updateMasterData, this.editIds);
      console.log("update supplier", data.nodeId, data.action, data.updateMasterData, this.editIds);
      this.modalType = null;
      if (data.action === 'accept') {
        await this.premiseEditStore.setSupplier(data.nodeId, data.updateMasterData, this.editIds);

      }

    },
    async updateMaterial(id, action) {
      console.log(id, action, this.editIds);
      await this.premiseEditStore.setMaterial(id, action === 'updateMasterData', this.editIds);

      if (this.editIds[0] !== null) {
        this.fillData("material", this.editIds[0]);
      }
    },
    updateCheckBoxes(value) {
      this.premiseEditStore.setAll(value);
    },
    multiselectAction(action) {
      this.openModal(action, this.selectedPremisses.map(p => p.id));
    },
    onClickAction(data) {
      const massEdit = 0 !== this.selectCount
      this.openModal(data.action, massEdit ? this.premiseEditStore.getSelectedPremissesIds : [data.id], data.id, massEdit);
    },
    openModal(type, ids, dataSource = -1, massEdit = true) {

      if (type !== 'destinations')
        this.fillData(type, dataSource)
      else {
        this.premiseEditStore.prepareDestinations(dataSource, ids, massEdit, true);
      }

      this.dataSourceId = dataSource !== -1 ? dataSource : null;
      this.editIds = ids;
      this.modalType = type;

      console.log("open modal", massEdit, this.modalType, this.editIds, this.dataSourceId)

    },
    async closeEditModalAction(action) {
      if (this.modalType === "destinations") {
        if (action === "accept") {
          await this.premiseEditStore.executeDestinationsMassEdit();
        } else {
          this.premiseEditStore.cancelMassEdit();
        }
      } else if (action === "accept") {
        const props = this.componentsData[this.modalType].props;

        switch(this.modalType) {
          case "price":
            await this.premiseEditStore.batchUpdatePrice(this.editIds, props);
            break;
          case "material":
            await this.premiseEditStore.batchUpdateMaterial(this.editIds, props);
            break;
          case "packaging":
            await this.premiseEditStore.batchUpdatePackaging(this.editIds, props);
            break;
        }
      }

      // Clear data
      this.fillData(this.modalType);
      this.modalType = null;
    },
    fillData(type, id = -1) {

      if (id === -1) {
        // clear
        this.componentsData = {
          price: {props: {price: 0, overSeaShare: 0.0, includeFcaFee: true}},
          material: {props: {partNumber: "", hsCode: "", tariffRate: 0.00, description: "", openSelectDirect: true}},
          packaging: {
            props: {
              length: 0,
              width: 0,
              height: 0,
              weight: 0,
              weightUnit: "KG",
              dimensionUnit: "MM",
              unitCount: 1,
              mixable: true,
              stackable: true
            }
          },
          supplier: {
            props: {
              preSelectedNode: null,
              openSelectDirect: false
            }
          },
          destinations: {props: {}},
        };
      } else {
        const premise = this.premiseEditStore.getById(id);

        if (type === "price") {
          this.componentsData.price.props = {
            price: premise.material_cost,
            overSeaShare: premise.oversea_share,
            includeFcaFee: premise.is_fca_enabled
          }
        } else if (type === "material") {

          this.componentsData.material.props = {
            partNumber: premise.material.part_number,
            hsCode: premise.material.hs_code ?? "",
            tariffRate: premise.tariff_rate ?? 0.00,
            description: premise.material.name ?? "",
            openSelectDirect: false
          }

        } else if (type === "packaging") {
          this.componentsData.packaging.props = {
            length: premise.handling_unit.length ?? 0,
            width: premise.handling_unit.width ?? 0,
            height: premise.handling_unit.height ?? 0,
            weight: premise.handling_unit.weight ?? 0,
            weightUnit: premise.handling_unit.weight_unit ?? "KG",
            dimensionUnit: premise.handling_unit.dimension_unit ?? "MM",
            unitCount: premise.handling_unit.content_unit_count ?? 1,
            mixable: premise.is_mixable ?? true,
            stackable: premise.is_stackable ?? true
          }
        } else if (type === "supplier") {
          this.componentsData.supplier.props = {
            preSelectedNode: premise.supplier,
            openSelectDirect: true
          }
        }
      }
    }
  }
}
</script>
<style scoped>

/* Global style für copy-mode cursor */
.edit-calculation-container.has-selection :deep(.copyable-cell:hover) {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPgogIDxyZWN0IHg9Ijg0IiB5PSIzMiIgd2lkdGg9IjEzNiIgaGVpZ2h0PSIxMzYiIGZpbGw9IndoaXRlIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iOCIgcng9IjQiLz4KICA8cmVjdCB4PSIzNiIgeT0iODQiIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM2IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjgiIHJ4PSI0Ii8+Cjwvc3ZnPg==") 12 12, pointer;
  background-color: rgba(107, 134, 156, 0.05);
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
}

.space-around {
  margin: 3rem;
}

.edit-calculation-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.6rem;
  flex: 1 1 auto;
  font-size: 1.6rem;
}

.modal-content-container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.modal-content-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}

/* Container Animation */

.list-edit-enter-from {
  opacity: 0;
  transform: translateY(-20px);
  max-height: 0;
}

.list-edit-leave-to {
  opacity: 0;
  transform: translateY(-20px);
  max-height: 0;
}

.list-edit-enter-active,
.list-edit-leave-active {
  transition: all 0.4s ease;
  overflow: hidden;
}


.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
}

.edit-calculation-list-container {
  background: white;
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 3rem;
  margin-bottom: 3rem;

}


.edit-calculation-list-header {
  display: grid;
  grid-template-columns: 6rem 1fr 1fr 1.5fr 1.5fr 1.5fr 10rem;
  gap: 1.6rem;
  padding: 2.4rem;
  background-color: #ffffff;
  border-bottom: 0.1rem solid rgba(107, 134, 156, 0.2);
  font-weight: 500;
  font-size: 1.4rem;
  color: #6B869C;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}


.edit-calculation-spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 30rem
}

.edit-calculation-spinner {
  font-size: 1.6rem;
  width: 24rem;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-calculation-container {
  display: flex;
  flex-direction: column;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
}

.header-controls {
  display: flex;
  gap: 1.6rem;
}
</style>