<template>
  <transition name="modal">
    <!-- by using @click.stop on the modal itself to prevent click events from propagating to the parent -->
    <div
      class="modal-container"
      :class="{'full': expanding === true}"
      @click.stop>
      <div class="modal-header">
        <h3>
          Facet Configuration
        </h3>
      </div>
      <div class="modal-body">
        <div v-if="expanding">
          Full Facet Here - {{ expanding }}
        </div>
        <div v-else>
          <!-- JSON FORM BUILDER COMPONENT -->
          <vue-form-generator :schema="schema" :model="model" :options="formOptions">
          </vue-form-generator>
          <div class="modal-footer text-right">
            <button
              type="button"
              class="button is-light"
              @click="close">
              <span class="icon">
                <font-awesome-icon
                  icon="ban"
                  size="medium" />
              </span>
              <span>
                Cancel
              </span>
            </button>
            <button
              type="button"
              class="button is-primary config-submit"
              @click="submit($event)">
              <span class="icon">
                <font-awesome-icon
                  icon="check"
                  size="med" />
              </span>
              <span>
                Save
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import VueFormGenerator from 'vue-form-generator';
import store from '../store';

export default {
  name: 'modal',
  props: {
    /**
     * data model of the content items of the facet.
     */
    model: {
      type: Object,
      required: true,
      default: () => ({
        config: {}
      })
    },
    /**
     * schema is the JSON form schema that exposes items in the config modal; mapped to the model group.
     */
    schema: {
      type: Object,
      required: false
    },
    /**
     * the passed in Facet ID, to look up in the layout.
     */
    facetId: {
      type: Number,
      required: true
    },
    /**
     * Boolean flag if the facet is visible or hidden.
     */
    isModalVisible: {
      type: Boolean,
      required: true,
      default: false
    },
    /**
     * Boolean flag if the facet is expandable.
     */
    expanding: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  components: {
    'vue-form-generator': VueFormGenerator.component
  },
  data: () => ({
    formOptions: {
      validateAfterLoad: true,
      validateAfterChanged: true
    }
  }),
  methods: {
    /**
     * @name submit
     * @param {Object} e - The passed in event
     * @description This will collect the facet model and id, and passes into the vuex store.  The normal submit event is prevented (thus the event param).
     * @event {Object} store.dispatch - passes payload to store `layouts/updateFacetOptions`.
     * @event {String} $emit - this.$emit's to 'close' to $parent.
     */
    submit (e) {
      const payload = {
        facetModel: this.model,
        facetId: this.facetId
      }
      // console.log('[grid]     submitting config: ', payload);
      store.dispatch('layouts/updateFacetOptions', payload);
      // this.$parent.$emit('submittingGridOptions', payload);
      this.$parent.$emit('close');
      // this.$emit('submittingGridOptions', payload);
      // this.$emit('close');
      e.preventDefault();
    },
    /**
     * @name close
     * @description This emits the close event to close the modal.
     * @event {String} $emit - this.$emit's to 'close' to $parent.
     */
    close () {
      this.$parent.$emit('close');
    }
  },
  mounted: function () {
    /**
     * adds Evemt Listener when modal is open for `esc` key; which will close Modal without saving.
     */
    document.addEventListener('keydown', (e) => {
      if (this.isModalVisible && e.keyCode === 27) {
        this.close();
      }
    });
  }
};
</script>

<style>
.modal-container {
  width: 600px;
  margin: 40px auto 0;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
  z-index: 99999;
  position: absolute;
  top: 25vh;
  left: calc(50vw - 300px);

  /* needed styles for the overlay */
  z-index: 10; /* keep on top of other elements on the page */
  outline: 9999px solid rgba(0,0,0,0.5);
}

.modal-container.full {
  width: 90%;
  left: calc(50vw - 45%);
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
  text-align: left;
}

.text-right {
  text-align: right;
}

.field-input {
  margin-bottom: 2em;
}

.form-label {
  display: block;
  margin-bottom: 2em;
}

.form-label > .form-control {
  margin-top: 0.5em;
}

.form-control {
  width: 100%;
  padding: 0.5em 1em;

  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  box-shadow: none;
  display: inline-flex;
  font-size: 1rem;
  height: 2.25em;
  justify-content: flex-start;
  line-height: 1.5;
  padding-bottom: calc(0.375em - 1px);
  padding-left: calc(0.625em - 1px);
  padding-right: calc(0.625em - 1px);
  padding-top: calc(0.375em - 1px);
  position: relative;
  vertical-align: top;
}

/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

button.config-submit:hover .icon svg path {
  fill: hsl(48, 100%, 67%);
}
</style>
