<template>
  <div class="container">
    <div class="supplier-container">
      <div class="caption-column">Supplier</div>
      <div class="input-field input-field-name"><span class="user-icon" v-if="isUserSupplier"><ph-user
          weight="fill"></ph-user></span> {{ supplierName }}
      </div>
      <div class="caption-column">Address</div>
      <div class="input-field select-node-input-field-address">
        <div class="supplier-flag">
          <flag :iso="isoCode"/>
        </div>
        <div class="supplier-address">{{ supplierAddress }}</div>
      </div>
      <div class="caption-column">Coordinates</div>
      <div class="input-field">{{ coordinatesDMS }}</div>
    </div>
    <div class="supplier-map">
      <open-street-map-embed :coordinates="supplierCoordinates" :zoom="15" width="100%" height="300px" custom-filter="grayscale(0.8) sepia(0.5) hue-rotate(180deg) saturate(0.5) brightness(1.0)"></open-street-map-embed>
    </div>
  </div>
</template>
<script>


import IconButton from "@/components/UI/IconButton.vue";
import InputField from "@/components/UI/InputField.vue";
import Flag from "@/components/UI/Flag.vue";
import {PhUser} from "@phosphor-icons/vue";
import ModalDialog from "@/components/UI/ModalDialog.vue";
import Modal from "@/components/UI/Modal.vue";
import OpenStreetMapEmbed from "@/components/UI/OpenStreetMapEmbed.vue";

export default {
  name: "SupplierView",
  components: { OpenStreetMapEmbed, Modal, ModalDialog, PhUser, Flag, InputField, IconButton},
  props: {
    supplierName: {
      type: String,
      required: true
    },
    supplierAddress: {
      type: String,
      required: true
    },
    isoCode: {
      type: String,
      required: true
    },
    supplierCoordinates: {
      type: Object,
      required: false,
      default: null
    },
    isUserSupplier: {
      type: Boolean,
      required: false,
      default: true
    },
    openSelectDirect: {
      type: Boolean,
      default: false,
    }
  },
  computed: {

    // Kombinierte Ausgabe beider Koordinaten
    coordinatesDMS() {
      return `${this.convertToDMS(this.supplierCoordinates?.latitude, 'lat')}, ${this.convertToDMS(this.supplierCoordinates?.longitude, 'lng')}`;
    }
  },
  data() {
    return {
      selectSupplierModalState: false
    }
  },
  created() {
    this.selectSupplierModalState = this.openSelectDirect;
  },
  methods: {
    convertToDMS(coordinate, type) {

      if (!coordinate)
        return '';

      let direction;
      if (type === 'lat') {
        direction = coordinate >= 0 ? 'N' : 'S';
      } else {
        direction = coordinate >= 0 ? 'E' : 'W';
      }

      // Arbeite mit Absolutwert
      const abs = Math.abs(coordinate);

      // Grad (ganzzahliger Teil)
      const degrees = Math.floor(abs);

      // Minuten
      const minutesFloat = (abs - degrees) * 60;
      const minutes = minutesFloat.toFixed(4);


      return `${degrees}° ${minutes}' ${direction}`;
    }
  }
}
</script>


<style scoped>

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

.supplier-map {
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 1.6rem;
}

.user-icon {
  display: inline-flex;
  align-items: center;
}

.input-field-name {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex: 0 1 10rem
}

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

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

.input-field {
  align-self: center;
  font-size: 1.4rem;
  color: #6b7280;
}

.container {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.supplier-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;
}

.footer {
  display: flex;
  gap: 1.6rem;
  justify-self: flex-end;
  align-self: flex-end;
}

</style>