<template>
  <form @submit.prevent="handleSubmit">
      <div class="container">
        <h1 class="title">
          Strain Search
        </h1>

        <!-- Name Search Input -->
        <div class="field">
          <label class="label">Search By Name</label>
          <div class="control">
            <input ref="name" class="input" type="text" placeholder="Text input">
            <p v-if="error.length" class="help is-danger">{{error}}</p>
          </div>
        </div>

        <!-- Multi-Selects -->
        <div class="columns filters">
          <div class="column is-half">
            <div class="columns is-mobile">
              <div class="column is-half">
                <div class="field">
                  <label class="label">Desired Effects</label>
                  <div class="select is-multiple">
                    <select ref="effects" multiple size="6">
                      <option v-for="effect in effects" :key="effect" :value="effect">{{effect | capitalize}}</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="column is-half">
                <div class="field">
                  <label class="label">Medical Use</label>
                  <div class="select is-multiple">
                    <select ref="uses" multiple size="6">
                      <option v-for="use in uses" :key="use" :value="use">{{use | capitalize}}</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-half">
            <div class="columns is-mobile">
              <div class="column is-half">
                <div class="field">
                  <label class="label">Condition</label>
                  <div class="select is-multiple">
                    <select ref="conditions" multiple size="6">
                      <option v-for="condition in conditions" :key="condition" :value="condition">{{condition | capitalize}}</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="column is-half">
                <div class="field">
                  <label class="label">Flavor</label>
                  <div class="select is-multiple">
                    <select ref="flavors" multiple size="6">
                      <option v-for="flavor in flavors" :key="flavor" :value="flavor">{{flavor | capitalize}}</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Form Submits  -->
        <div class="field is-grouped">
          <div class="control">
            <button type="submit" class="button is-link">Submit</button>
          </div>
          <div class="control">
            <button type="button" class="button is-text" @click.prevent="resetForm">Clear</button>
          </div>
        </div>
      </div>
    </form>
</template>

<script>
import emitter from '../lib/emitter.mjs';

const getMultiValues = node => Array.from(node.selectedOptions).map(o => o.value);

export default {
  props: {
    effects: Array,
    uses: Array,
    conditions: Array,
    flavors: Array,
  },
  data() {
    return {
      error: '',
    };
  },
  created() {
    emitter.on('error', this.setError);
  },
  beforeDestroy() {
    emitter.off('error', this.setError);
  },
  methods: {
    handleSubmit() {
      const requirements = {
        name: this.$refs.name.value,
        effects: getMultiValues(this.$refs.effects),
        uses: getMultiValues(this.$refs.uses),
        conditions: getMultiValues(this.$refs.conditions),
        flavors: getMultiValues(this.$refs.flavors),
      };

      this.error = '';
      emitter.emit('search', requirements);
    },
    resetForm() {
      this.$el.reset();
    },
    setError(msg) {
      this.error = msg;
    },
  },
};
</script>

<style scoped>
.filters .select {
  display: block;
}

.filters .select select[multiple] {
  width: 100%;
}
</style>
