<template>
  <div class="row">
    <div class="col-md-12" v-if="message !== undefined">
      <Alert :text="message" :type="'ERROR'" />
    </div>
    <!-- <div class="col-md-3">
      <input
        class="form-control"
        type="text"
        step="any"
        name="levy"
        placeholder="Name"
        v-model="item.name"
      />
    </div> -->
    <div class="col-md-4">
      <select class="form-control" v-model="item.class" @change="onClassChanged()">
        <option v-for="(item, i) in classes" :key="i" :value="item">{{ item.name }}</option>
      </select>
    </div>
    <div class="col-md-4">
      <select class="form-control" v-model="item.property" :disabled="!item.class">
        <option v-for="(item, i) in properties" :key="i">{{ item }}</option>
      </select>
    </div>
    <div class="col-md-4">
      <div class="btn-solid-blue" style="margin-top:-5px" @click="onItemAdd()">Insert</div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import Alert from "../shared/alert.vue";

export default {
  components: {
    Alert
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      message: undefined,
      item: {
        name: undefined,
        class: undefined,
        property: undefined
      }
    };
  },
  computed: {
    ...mapState("info", ["classes", "properties"])
  },
  methods: {
    ...mapActions("info", ["init", "getClasses", "getProperties"]),
    onClassChanged() {
      this.getProperties(this.item.class);
    },
    onItemAdd() {
      this.message = undefined;
      let msg = "";
      // if (this.item.name === undefined) {
      //   msg += "Please give a name...";
      // }
      if (this.item.class === undefined) {
        msg += "Please choose a class...";
      }
      if (this.item.property === undefined) {
        msg += "Please choose a property...";
      }
      if (msg.length > 0) {
        this.message = msg;
      } else {
        this.$emit("onItemAdd", this.item);
      }
    }
  }
};
</script>
