<template>
  <div class="ui segment">
    <div class="field required">
      <label for="basemap-title">Titre</label>
      <input
        v-model="basemap.title"
        type="text"
        name="basemap-title"
        required
      />
      <ul v-if="basemap.errors" id="errorlist-title" class="errorlist">
        <li>
          {{ basemap.errors }}
        </li>
      </ul>
    </div>

    <div class="nested">
      <div v-if="basemap.layers" class="ui segments layers-container">
        <ProjectMappingContextLayer
          v-for="layer in basemap.layers"
          :key="'layer-' + layer.dataKey"
          :layer="layer"
          :basemapid="basemap.id"
        />
      </div>
      <div class="ui buttons">
        <a
          @click="addLayer"
          class="ui compact small icon left floated button green"
        >
          <i class="ui plus icon"></i>
          <span>Ajouter une couche</span>
        </a>
      </div>

      <div @click="deleteBasemap" class="ui buttons">
        <a
          class="
            ui
            compact
            red
            small
            icon
            right
            floated
            button button-hover-green
          "
        >
          <i class="ui trash alternate icon"></i>
          <span>Supprimer ce fond cartographique</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import ProjectMappingContextLayer from "@/components/project/ProjectMappingContextLayer.vue";

export default {
  name: "Project_mapping_basemap",

  props: ["basemap"],

  components: {
    ProjectMappingContextLayer,
  },

  computed: {
    maxLayersCount: function () {
      return this.basemap.layers.reduce((acc, curr) => {
        if (curr.dataKey > acc) {
          return curr.dataKey;
        } else {
          return acc;
        }
      }, 0);
    },
  },

  methods: {
    deleteBasemap() {
      this.$store.commit("map/DELETE_BASEMAP", this.basemap.id);
    },

    addLayer(layer) {
      const newLayer = {
        dataKey: this.maxLayersCount + 1,
        opacity: "1.00",
        order: 0,
        queryable: false,
        title: "Open street map",
        ...layer,
      };
      this.$store.commit("map/UPDATE_BASEMAP", {
        layers: [...this.basemap.layers, newLayer],
        id: this.basemap.id,
        title: this.basemap.title,
        errors: this.basemap.errors,
      });
    },

    updateTitle(evt) {
      this.$store.commit("map/UPDATE_BASEMAP", {
        id: this.basemap.id,
        title: evt.title,
        errors: evt.errors,
      });
    },

    removeLayer(dataKey) {
      this.layers = this.layers.filter((layer) => layer.dataKey !== dataKey);
    },

    fillLayersWithDatakey(layers) {
      let dataKey = 0;
      this.$store.commit("map/REPLACE_BASEMAP_LAYERS", {
        basemapId: this.basemap.id,
        layers: layers.map((el) => {
          dataKey += 1;
          return { dataKey, ...el };
        }),
      });
    },
  },
  watch: {
    'basemap.title': {
      deep: true,
      handler : function (newValue, oldValue) {
        if (newValue != oldValue) {
          this.basemap.title = newValue;
          if(newValue == '')
            this.basemap.errors = "Veuillez compléter ce champ.";
          else
            this.basemap.errors = '';
          this.updateTitle(this.basemap)
        }
      }
    }
  },

  created() {
    if (this.basemap.layers) { //* add datakeys to layers coming from api 
      this.fillLayersWithDatakey(this.basemap.layers);
    }
  },
  // destroyed(){
  //   this.errors = [];
  // }

  // mounted() { //* not present in original
  //   if (!this.basemap.title) {
  //     this.$store.commit("map/UPDATE_BASEMAP", {
  //       id: this.basemap.id,
  //       title: newValue,
  //     });
  //   }
  // },
};
</script>

<style scoped>
.button {
  margin-right: 0.5em !important;
}
</style>