<template>
  <div class="edit-calculation-container">
    <div class="header-container">
      <h2 class="page-header">Edit calculation</h2>
      <div class="header-controls">
        <basic-button @click="close" :show-icon="false" :disabled="premiseSingleEditStore.showLoadingSpinner"
                      variant="secondary"> {{ fromMassEdit ? 'Back' : 'Close' }}
        </basic-button>
        <basic-button v-if="!fromMassEdit"
                      :show-icon="true"
                      :disabled="premiseSingleEditStore.showLoadingSpinner || premiseSingleEditStore.isEmpty"
                      icon="Calculator"
                      variant="primary"
                      @click="startCalculation"
        >Calculate & close
        </basic-button>

      </div>
    </div>

    <div v-if="premiseSingleEditStore.showLoadingSpinner" class="edit-calculation-spinner-container">
      <box class="spinner-box">
        <spinner></spinner>
      </box>
    </div>
    <div v-else-if="premiseSingleEditStore.isEmpty" class="edit-calculation-spinner-container">
      <box class="spinner-box">No calculation found.</box>
    </div>
    <div v-else>

      <h3 class="sub-header">Supplier</h3>
      <div class="supplier-container">
        <box class="supplier-item">
          <supplier-view :supplier-address="premise.supplier.address"
                         :supplier-name="premise.supplier.name"
                         :supplier-coordinates="premise.supplier.location"
                         :iso-code="premise.supplier.country.iso_code"
          ></supplier-view>
        </box>
      </div>

      <!-- Headers for desktop (above 1500px) -->
      <div class="master-data-container master-data-headers-desktop">
        <h3 class="sub-header">Material</h3>
        <h3 class="sub-header">Price</h3>
        <h3 class="sub-header">Handling unit</h3>
      </div>

      <!-- Header for mobile (below 1500px) -->
      <div class="master-data-container master-data-headers-mobile">
        <h3 class="sub-header">Master data</h3>
      </div>

      <div class="master-data-container">
        <box class="master-data-item">
          <material-edit :part-number="premise.material.part_number"
                         :description="premise.material.name"
                         :id="premise.material.id"
                         :tariff-unlocked="premise.tariff_unlocked"
                         v-model:hs-code="premise.hs_code"
                         v-model:tariff-rate="premise.tariff_rate"
                         v-model:country-id="premise.supplier.country.id"
                         @save="save"></material-edit>
        </box>
        <box class="master-data-item">
          <price-edit v-model:include-fca-fee="premise.is_fca_enabled"
                      v-model:over-sea-share="premise.oversea_share"
                      v-model:price="premise.material_cost"
                      @save="save"></price-edit>
        </box>
        <box class="master-data-item">
          <packaging-edit v-model:length="premise.handling_unit.length"
                          v-model:width="premise.handling_unit.width"
                          v-model:height="premise.handling_unit.height"
                          v-model:weight="premise.handling_unit.weight"
                          v-model:weight-unit="premise.handling_unit.weight_unit"
                          v-model:dimension-unit="premise.handling_unit.dimension_unit"
                          v-model:unit-count="premise.handling_unit.content_unit_count"
                          v-model:stackable="premise.is_stackable"
                          v-model:mixable="premise.is_mixable"
                          @save="save"></packaging-edit>
        </box>
      </div>

      <h3 class="sub-header">Destinations & routes</h3>
      <destination-list-view></destination-list-view>

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

<script>

import BasicButton from "@/components/UI/BasicButton.vue";
import SupplierView from "@/components/layout/edit/SupplierView.vue";
import Box from "@/components/UI/Box.vue";
import MaterialEdit from "@/components/layout/edit/MaterialEdit.vue";
import PackagingEdit from "@/components/layout/edit/PackagingEdit.vue";
import PriceEdit from "@/components/layout/edit/PriceEdit.vue";
import DestinationListView from "@/components/layout/edit/DestinationListView.vue";
import {mapStores} from "pinia";
import NotificationBar from "@/components/UI/NotificationBar.vue";
import Modal from "@/components/UI/Modal.vue";
import TraceView from "@/components/layout/TraceView.vue";
import IconButton from "@/components/UI/IconButton.vue";
import {UrlSafeBase64} from "@/common.js";
import {usePremiseSingleEditStore} from "@/store/premiseSingleEdit.js";
import {useNotificationStore} from "@/store/notification.js";
import Spinner from "@/components/UI/Spinner.vue";

export default {
  name: "SingleEdit",
  components: {
    Spinner,

    IconButton,
    TraceView,
    Modal,
    NotificationBar,
    DestinationListView,
    PriceEdit,
    PackagingEdit,
    MaterialEdit,
    Box,
    SupplierView,
    BasicButton
  },
  data() {
    return {
      traceModal: false,
      bulkEditQuery: null,
      id: null,
    }
  },
  computed: {
    ...mapStores(usePremiseSingleEditStore, useNotificationStore),
    premise() {
      return this.premiseSingleEditStore.premise;
    },
    fromMassEdit() {
      return this.bulkEditQuery !== null;
    },
    showProcessingModal() {
      return this.premiseSingleEditStore.showProcessingModal;
    },
    shownProcessingMessage() {
      if (this.premiseSingleEditStore.routing)
        return "Please wait. Routing ..."

      return "Please wait. Calculating ...";
    }
  },
  watch: {
    showProcessingModal(newState, _) {
      if(newState) {
        this.notificationStore.setSpinner(this.shownProcessingMessage);
      }
      else {
        this.notificationStore.clearSpinner();
      }
    }
  },
  methods: {

    async startCalculation() {
      this.showCalculationModal = true;
      const error = await this.premiseSingleEditStore.startCalculation();

      if (error === null) {
        this.close();
      }

      this.showCalculationModal = false;
    },
    close() {
      if (this.bulkEditQuery) {
        //TODO: deselect element and save
        this.$router.push({name: 'bulk', params: {ids: this.bulkEditQuery}});
      } else {
        //TODO: deselect element and save
        this.$router.push({name: 'home'});
      }
    },
    async save(type) {
      if (type === 'price') {
        await this.premiseSingleEditStore.savePrice();
      } else if (type === 'material') {
        await this.premiseSingleEditStore.saveMaterial();
      } else if (type === 'packaging') {
        await this.premiseSingleEditStore.savePackaging();
      }
    },
    trace() {
      this.traceModal = true;
    }
  },
  created() {
    [this.id] = new UrlSafeBase64().decodeIds(this.$route.params.id);

    if (this.$route.params.ids)
      this.bulkEditQuery = this.$route.params.ids;

    if (!isNaN(this.id))
      this.premiseSingleEditStore.load(this.id)

  },

}
</script>

<style scoped>
.edit-calculation-container {
  display: flex;
  flex-direction: column;
}

.edit-calculation-spinner-container
{
  display: flex;
  padding-top: 10rem;
  justify-content: center;
}

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

.header-controls {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.supplier-container {
  margin: 2.4rem 0;
}

.supplier-item {
  width: 100%;
}

.master-data-container {
  display: grid;
  grid-template-columns: 4fr 4fr 5fr;
  gap: 1.6rem;
  margin: 2.4rem 0;
}

.master-data-item {
  padding: 2.4rem;
}

/* Show desktop headers by default */
.master-data-headers-desktop {
  display: grid;
}

.master-data-headers-mobile {
  display: none;
}

/* Responsive layout for viewports below 1500px */
@media (max-width: 1500px) {
  .master-data-container {
    grid-template-columns: 1fr;
  }

  /* Hide desktop headers and show mobile header */
  .master-data-headers-desktop {
    display: none;
  }

  .master-data-headers-mobile {
    display: grid;
  }
}

.space-around {
  margin: 3rem;
}

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

</style>