<template>
  <div>
    <b-button-close @click="$emit('cancel')" class="close"/>
    <h6>Créer une nouvelle organisation</h6>
    <br>
    <form>
      <div class="form-row">
        <div class="form-group col-11">
          <ValidationProvider rules="required" v-slot="{ classes, errors }">
            <div class="control" :class="classes">
              <label class="required">Nom de l'organisation</label>
              <p>Inscrivez le nom complet et en toutes lettres ; par ex. « Communauté des Communes Rurales de l'Entre-Deux-Mers »</p>
              <input
                v-model="formData.name"
                class="form-control"
                type="text"
                placeholder=""
              >
              <span class="form-errors">{{ errors[0] }}</span>
            </div>
          </ValidationProvider>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <div class="control">
            <label>Sigle</label>
            <input
              v-model="formData.sigle"
              class="form-control"
              type="text"
              placeholder=""
            >
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <label>Numéro SIRET</label>
          <input
            v-model="formData.siret"
            class="form-control"
            type="text"
            placeholder="xxx xxx xxx xxxxx"
          >
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <ValidationProvider rules="required" v-slot="{ classes, errors }">
            <div class="control" :class="classes">
              <label class="required">Type d'organisation</label>
              <Multiselect
                v-model="formData.type"
                :options="organisationsTypes"
                track-by="codename"
                label="display_name"
                selectLabel=""
                selectedLabel=""
                deselectLabel=""
                :searchable="false"
                placeholder="Sélectionnez un type"
              />
              <span class="form-errors">{{ errors[0] }}</span>
            </div>
          </ValidationProvider>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <label>Logo de l'organisation</label>
          <p>Importez un logo au format JPG ou PNG (taille maximale : 2 Mo)</p>
          <ValidationProvider ref="thumbnail" v-slot="{ classes, errors }">
            <div class="control" :class="classes">
              <ImportImage
                name="logo"
                :title="null"
                :file="null"
                @update="setThumbnail"
              />
              <span class="form-errors">{{ errors[0] }}</span>
            </div>
          </ValidationProvider>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-9">
          <label>Site internet</label>
          <input
            v-model="formData.web"
            class="form-control"
            type="text"
            placeholder="https://"
            @focus="formData.web === null ? formData.web = 'https://' : null"
            @blur="formData.web === 'https://' ? formData.web = null : null"
          >
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <label>Numéro de téléphone</label>
          <input
            v-model="formData.tel"
            class="form-control"
            type="text"
            placeholder=""
          >
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-11">
          <label>Adresse postale</label>
          <textarea
            v-model="formData.postalAddress"
            class="form-control"
          />
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-11">
          <label>Description de l'organisation</label>
          <textarea
            v-model="formData.description"
            class="form-control"
          />
        </div>
      </div>
      <!-- <div class="form-row">
        <div class="form-group col-11">
          <label>
            Ajouter cette organisation à des groupe d'organisations
          </label>
          <p>
            L'ajout de cette organisation à un groupe d'organisation donnera accès aux données et collections de données associées à ce groupe d'organisation.
          </p>
          <SearchUsergroups
            :type="'group-of-organisation'"
            @select="addOrgToSphere"
          />
          <div
            v-if="spheres.length > 0"
            id="orga-spheres-container"
          >
            <div
              v-for="sphere of spheres"
              :key="sphere.id"
              class="orga-sphere"
            >
              {{ sphere.display_name }}
              <b-icon-x
                font-scale="1.5"
                @click="removeOrgFromSphere"
              />
            </div>
          </div>
        </div>
      </div> -->
    </form>
    <hr class="divider" />
  </div>
</template>

<script>
import {
  mapState,
  mapActions
} from 'vuex';

import ImportImage from '@/components/ImportImage';
// import SearchUsergroups from '@/components/SearchUsergroups';

import {
  ValidationObserver,
  ValidationProvider,
  extend,
  configure
} from 'vee-validate';
import {
  required
} from 'vee-validate/dist/rules';


extend('required', {
  ...required,
  message: 'Ce champ est requis'
});

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
});

export default {
  name: 'OrganisationCreation',

  components: {
    ValidationObserver,
    ValidationProvider,
    ImportImage,
    // SearchUsergroups
  },

  data() {
    return {
      formData: {
        name: null,
        sigle: null,
        siret: null,
        type: null,
        web: null,
        postalAddress: null,
        tel: null,
        description: null
      },
      thumbnail: null,
      spheres: []
    };
  },

  computed: {
    ...mapState('organisations', [
      'organisationsTypes'
    ]),
    ...mapState('sign-up', [
      'error'
    ])
  },

  watch: {
    formData: {
      deep: true,
      handler(newValue) {
        this.$emit('update', {
          form: newValue,
          thumbnail: this.thumbnail,
          spheres: this.spheres
        });
      }
    },
    thumbnail(newValue) {
      this.$emit('update', {
        form: this.formData,
        thumbnail: newValue,
        spheres: this.spheres
      });
    },
    spheres: {
      deep: true,
      handler(newValue) {
        this.$emit('update', {
          form: this.formData,
          thumbnail: this.thumbnail,
          spheres: newValue
        });
      }
    },
    error(newValue) {
      if (newValue) {
        for (const [key, value] of Object.entries(newValue)) {
          this.$refs[key].applyResult({
            errors: value,
            valid: false,
            failedRules: {},
          });
        }
      }
    }
  },

  created() {
    if (this.organisationsTypes.length === 0) {
      this.GET_ORGANISATIONS_TYPES();
    }
    this.$emit('update', {
      form: this.formData,
      thumbnail: this.thumbnail,
      spheres: this.spheres
    });
  },

  methods: {
    ...mapActions('organisations', ['GET_ORGANISATIONS_TYPES']),

    setThumbnail(e) {
      const formData = new FormData();
      formData.append('file', e);
      this.thumbnail = formData;
    },

    addOrgToSphere(e) {
      this.spheres.push(e);
    },
    removeOrgFromSphere(e) {
      const index = this.spheres.findIndex(el => el.id === e.id);
      this.spheres.splice(index, 1);
    }
  }
}
</script>

<style lang="less" scoped>
form {
  min-width: 800px;
  margin-bottom: 3em;
}

h2 {
  color: @blue;
  margin-top: 0.5em;
  margin-left: 0.5em;
}

h4 {
  color: @blue;
  margin-top: 0.8em;
}

button {
  margin: 1em 2em 0 0;
  font-size: 1em;
}

.close {
  font-size: 2rem;
  position: relative;
  display: block;
  float: right;
  top: -2.5rem;
  right: -2.5rem;
}

#orga-spheres-container {
  display: flex;
  flex-flow: row wrap;
  padding: 0.1em;
  margin: 0.5em 0;
  .orga-sphere {
    display: flex;
    margin: 0.2em 1em 0.2em 0;
    padding: 0.5em;
    border-radius: 10px;
    font-size: 0.9em;
    background-color: @blue;
    color: white;
    .b-icon {
      cursor: pointer;
    }
  }
}

</style>