<template>
  <div
    :id="layer.dataKey"
    class="ui segment layer-item"
  >
    <div class="ui divided form">
      <div
        class="field"
        data-type="layer-field"
      >
        <label
          for="form.layer.id_for_label"
          class="layer-handle-sort"
        >
          <i class="th icon" />couche
        </label>
        <!-- {% if is_empty %} {# TODO arranger le dropdown pour les ajout à la volée
        #} {# le selecteur de couche ne s'affichant pas correctement on passe
        par un field django par defaut en attendant #} -->
        <!--   {{ form.layer }} -->
        <!-- {% else %} -->
        <Dropdown
          :options="availableLayerOptions"
          :selected="selectedLayer.name"
          :selection.sync="selectedLayer"
          :search="true"
          :placeholder="placeholder"
        />
        <!-- {{ form.layer.errors }} -->
      </div>
      <div class="fields">
        <div
          class="field three wide {% if form.opacity.errors %} error{% endif %}"
        >
          <label for="opacity">Opacité</label>
          <input
            v-model.number="layerOpacity"
            type="number"
            oninput="validity.valid||(value='');"
            step="0.01"
            min="0"
            max="1"
          >
          <!-- {{ form.opacity.errors }} -->
        </div>
        <div class="field three wide">
          <div
            class="ui checkbox"
            @click="updateLayer({ ...layer, queryable: !layer.queryable })"
          >
            <input
              v-model="layer.queryable"
              type="checkbox"
              name="queryable"
            >
            <label for="queryable"> Requêtable</label>
          </div>
          <!-- {{ form.queryable.errors }} -->
        </div>
      </div>

      <div
        class="field"
        @click="removeLayer"
      >
        <div class="ui compact small icon floated button button-hover-red">
          <i class="ui grey trash alternate icon" />
          <span>Supprimer cette couche</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Dropdown from '@/components/Dropdown.vue';
import { mapState } from 'vuex';

export default {
  name: 'ProjectMappingContextLayer',

  components: {
    Dropdown,
  },

  props: ['layer', 'basemapid'],

  computed: {
    ...mapState('map', ['availableLayers']),

    selectedLayer: {
      get() {
        return this.retrieveLayer(this.layer.title) || [];
      },

      set(newValue) {
        const matchingLayer = this.retrieveLayer(newValue.title);
        if (matchingLayer !== undefined) {
          this.updateLayer({
            ...this.layer,
            service: newValue.name,
            title: newValue.value,
            id: matchingLayer.id,
          });
        }
      },
    },

    layerOpacity: {
      get() {
        return this.layer.opacity;
      },
      set(newValue) {
        if (newValue) {
          //* check if value was filled
          this.updateLayer({ ...this.layer, opacity: newValue });
        }
      },
    },

    availableLayerOptions: function () {
      return this.availableLayers.map((el) => {
        return {
          id: el.id,
          name: `${el.title} - ${el.service}`,
          value: el.title,
          title: el.title,
        };
      });
    },

    placeholder: function () {
      return this.selectedLayer && this.selectedLayer.name
        ? ''
        : 'Choisissez une couche';
    },
  },

  mounted() {
    const matchingLayer = this.retrieveLayer(this.layer.title);
    if (matchingLayer !== undefined) {
      this.updateLayer({
        ...this.layer,
        service: matchingLayer.service,
        title: matchingLayer.title,
        id: matchingLayer.id,
      });
    }
  },

  methods: {
    retrieveLayer(title) {
      return this.availableLayerOptions.find((el) => el.title === title);
    },

    removeLayer() {
      this.$store.commit('map/DELETE_BASEMAP_LAYER', {
        basemapId: this.basemapid,
        layerId: this.layer.dataKey,
      });
    },

    updateLayer(layer) {
      this.$store.commit('map/UPDATE_BASEMAP_LAYER', {
        basemapId: this.basemapid,
        layerId: this.layer.dataKey,
        layer,
      });
    },
  },
};
</script>