<template>

    <div class="fourteen wide column">
       <div id="message_info" class="fullwidth">
        <div v-if="infoMessage" class="ui positive message" style="text-align: left;">
           <div class="header">
              <i class="info circle icon"></i> Informations
            </div>
          <ul class="list">
            {{ infoMessage }}
           </ul>
          </div>
      </div>
      <h1 class="ui header">Administration des fonds cartographiques</h1>

      <form
        id="form-layers"
        action="."
        method="post"
        enctype="multipart/form-data"
        class="ui form"
      >
        <!--  {{ formset.management_form }} -->
        <div class="ui buttons">
          <a
            class="ui compact small icon left floated button green"
            data-variation="mini"
            @click="addBasemap"
          >
            <i class="ui plus icon"></i>
            <span>Créer un fond cartographique</span>
          </a>
        </div>

        <div v-if="basemaps" class="ui">
          <ProjectMappingBasemap
            v-for="basemap in basemaps"
            :key="basemap.id"
            :basemap="basemap"
          />
        </div>

        <button
          @click="saveChanges"
          type="button"
          class="ui teal icon floated button"
        >
          <i class="white save icon"></i> Enregistrer les changements
        </button>
      </form>
    </div>
</template>

<script>
import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
import { mapState, mapGetters } from "vuex";

export default {
  name: "Project_mapping",

  components: {
    ProjectMappingBasemap: Project_mapping_basemap,
  },

  data() {
    return {
      infoMessage: '',
      newBasemapIds: [],
    };
  },

  computed: {
    ...mapState("map", ["basemaps"]),
    ...mapGetters("map", ["basemapMaxId"]),
  },

  methods: {
    addBasemap() {
      this.newBasemapIds.push(this.basemapMaxId + 1); //* register new basemaps to seperate post and put
      this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
    },
    checkTitles(){
      let isValid = true;
      this.basemaps.forEach(basemap => {
        if (basemap.title === null || basemap.title === '' ){
          basemap.errors = "Veuillez compléter ce champ."
          isValid = false
        } else {
           basemap.errors = ''
        }
      });
      return isValid;
    },

    saveChanges() {
      // ToDo : check if values are filled
      if (this.checkTitles()){
        this.$store.dispatch("map/SAVE_BASEMAPS", this.newBasemapIds)
        .then((res) => {
          console.log('res', res)
        })
        .catch((error) => {
          console.log(error)
        })
        this.newBasemapIds = [];
        this.infoMessage = 'Enregistrement effectué.'
        setTimeout(function(){
            this.infoMessage = ''; 
            }.bind(this), 5000);
      }
    }
  },

  created() {
    if (!this.$store.getters.project) {
      this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
    }
  },
};
</script>