<script setup lang="ts">
import type { StyleSpecification } from "maplibre-gl";

const { mapStyle } = defineProps<{
  mapStyle: StyleSpecification & { id: string };
}>();

const emit = defineEmits<{
  (e: "update:mapStyle", mapStyle: StyleSpecification & { id: string }): void;
}>();

const updateMapStyle = (mapStyle: StyleSpecification & { id: string }) => {
  emit("update:mapStyle", mapStyle);
};

const sources = computed(() => {
  return mapStyle.sources;
});

const layers = computed(() => {
  return mapStyle.layers;
});

const glyphs = computed(() => {
  return mapStyle.glyphs;
});

const sprite = computed(() => {
  return mapStyle.sprite;
});
</script>

<template>
  <div class="flex flex-col">
    <div v-for="(source, name) in sources" class="flex flex-col">
      <h4>{{ name.toString() }}-{{ source.type }}</h4>
      <div class="flex flex-col" v-for="(value, key) in source">
        <div class="flex">
          <h6>{{ key }}:</h6>
          <p>{{ value }}</p>
        </div>
      </div>
    </div>
    <div class="divider"></div>
    <div v-for="(layer, name) in layers" class="flex flex-col">
      <h4>{{ name.toString() }}-{{ layer.type }}</h4>
      <div class="flex flex-col" v-for="(value, key) in layer">
        <div class="flex">
          <h6>{{ key }}:</h6>
          <p>{{ value }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
