<template>
  <div class="dest-mass-route-cell">
    <div class="dest-mass-route-dropdown">
      <route-dropdown
          placeholder="No route selected"
          empty-text="No routes"
          :disabled="destination.disabled"
          :show-d2d-warn="showD2DWarn"
          v-model:model-value="this.selectedRoute"
          :options="destination.routes"
          display-key="routeDisplayString"
          value-key="routeCompareString"
          @update:modelValue="updateSelectedRoute"
      />
    </div>
    <div>
      <icon-button :disabled="destination.disabled || this.selectedRoute !== 'D2D_ROUTING'"  icon="pencilSimple" @click="openD2DModal">icon</icon-button>
    </div>

    <modal :state="modalState" @close="modalState = false">
      <div class="destination-route-modal">
        <div>
          <div>D2D Rate [EUR]</div>
        </div>
        <div>
          <div class="text-container">
            <input :value="this.rateD2d" @blur="validateRateD2d" class="input-field" ref="rate" @keydown.enter="handleEnter('rate', $event)"
                   autocomplete="off"/>
          </div>
        </div>
        <div>
          <div> Lead time [days]</div>
        </div>
        <div>
          <div class="text-container">
            <input :value="this.leadTimeD2d" @blur="validateLeadTimeD2d" class="input-field" ref="leadTime" @keydown.enter="handleEnter('leadTime', $event)"
                   autocomplete="off"/>
          </div>
        </div>
        <div></div>
        <div class="destination-route-modal-footer">
          <basic-button :show-icon="false" @click="applyD2D">OK</basic-button>
          <basic-button variant="secondary" :show-icon="false" @click="dismissD2D">Cancel</basic-button>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>

import RouteDropdown from "@/components/UI/RouteDropdown.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Modal from "@/components/UI/Modal.vue";
import DestinationRoute from "@/components/layout/edit/destination/DestinationRoute.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import {parseNumberFromString} from "@/common.js";

export default {
  name: "DestinationMassRouteCell",
  components: {BasicButton, DestinationRoute, Modal, IconButton, RouteDropdown},
  props: {
    destination: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedRoute: null,
      modalState: false,
      rateD2d: null,
      leadTimeD2d: null
    }
  },
  computed: {
    showD2DWarn() {
      return (this.destination.rateD2d === null || this.destination.leadTimeD2d === null || this.destination.rateD2d === 0 || this.destination.leadTimeD2d === 0);
    },
  },
  created() {
    if(this.destination.isD2d) {
      this.selectedRoute = 'D2D_ROUTING'
    } else {
     this.selectedRoute = this.destination.selectedRoute;
    }
  },
  methods: {
    handleEnter(currentRef, event) {
      event.preventDefault();

      // Define the navigation order
      const inputOrder = ['rate', 'leadTime'];

      const currentIndex = inputOrder.indexOf(currentRef);

      if(currentIndex >= inputOrder.length - 1) {
        this.validateLeadTimeD2d(event);
        this.applyD2D();
        return;
      }

      if (currentIndex !== -1 && currentIndex < inputOrder.length - 1) {
        const nextRef = inputOrder[currentIndex + 1];
        this.$nextTick(() => {
          if (this.$refs[nextRef]) {
            this.$refs[nextRef].focus();
            this.$refs[nextRef].select();
          }
        });
      }
    },
    updateSelectedRoute(route) {
      if(route === 'D2D_ROUTING') {
        this.destination.selectedRoute = null;
        this.destination.isD2d = true;
      } else {
        this.destination.selectedRoute = route;
        this.destination.isD2d = false;
      }
    },
    applyD2D() {
      this.destination.rateD2d = this.rateD2d;
      this.destination.leadTimeD2d = this.leadTimeD2d;
      this.dismissD2D()
    },
    dismissD2D() {
      this.modalState = false;
    },
    openD2DModal() {
      this.rateD2d = this.destination.rateD2d;
      this.leadTimeD2d = this.destination.leadTimeD2d;
      this.modalState = true;
    },
    validateRateD2d(event) {

      const value = parseNumberFromString(event.target.value, 2);
      const validatedValue = Math.max(0, value);
      const stringified = validatedValue.toFixed(2);

      this.rateD2d = validatedValue === 0 ? null : validatedValue;
      event.target.value = stringified;
    },
    validateLeadTimeD2d(event) {

      const value = parseNumberFromString(event.target.value, 0);
      const validatedValue = Math.max(0, value);
      const stringified = validatedValue.toFixed();

      this.leadTimeD2d = validatedValue === 0 ? null : validatedValue;
      event.target.value = stringified;
    }
  }
}
</script>


<style scoped>

.destination-route-modal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  align-items: center;
}

.destination-route-modal-footer {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

.dest-mass-route-cell {
  width: 35rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.2rem;
  font-weight: 400;
  gap: 0.8rem;
  flex-shrink: 0;
}

.dest-mass-route-dropdown {
  width: 30rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.4rem;
  font-weight: 400;
  gap: 0.8rem;
  flex-shrink: 0;
}

.input-field {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: #002F54;
  width: 100%;
  min-width: 5rem;
}

.text-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 1 fit-content(80rem);
}

.text-container:hover {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  transform: scale(1.01);
}


</style>