<template>
  <div>
    <div v-if="loaded" class="row">
      <div class="col-md-12" v-if="message !== undefined">
        <Alert :text="message" :type="'ERROR'" />
      </div>
      <div class="col-md-3 mt-3">
        <input
          class="form-control"
          type="text"
          step="any"
          name="levy"
          placeholder="Name"
          v-model="item.name"
        />
      </div>
      <!-- <div class="col-md-3">
      <select
        v-if="canSelectClass"
        class="form-control"
        v-model="item.class"
        @change="onClassChanged()"
      >
        <option v-for="(item, i) in classes" :key="i" :value="item">{{item.name}}</option>
      </select>
      <input v-else disabled class="form-control" v-model="selectedClass.name" />
    </div>-->
      <div class="col-md-3 mt-3">
        <select class="form-control" v-model="item.property">
          <option v-for="(item, i) in properties" :key="i">{{ item }}</option>
        </select>
      </div>
      <div class="col-md-3 mt-3">
        <select class="form-control" v-model="item.format" @change="onFormatChanged">
          <option v-for="(item, i) in formats" :key="i">{{ item.displayName }}</option>
        </select>
      </div>
      <div class="col-md-3">
        <div class="btn-solid-blue" @click="onItemAdd()">Add</div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import Alert from "../shared/alert.vue";

export default {
  components: {
    Alert
  },
  mounted() {
    this.loadData().then(() => {
      setTimeout(() => {
        this.loaded = true;
      }, 100);
    });
  },
  data() {
    return {
      loaded: false,
      message: undefined,
      item: {
        name: undefined,
        class: undefined,
        property: undefined,
        format: "",
        formatTemplate: ""
      }
    };
  },
  props: {
    canSelectClass: {
      default: true
    },
    selectedClass: {}
  },
  computed: {
    ...mapState("info", ["classes", "properties"]),
    ...mapState("placeHolderFormat", ["formats"]),
    SelectedClass() {
      this.item.class = selectedClass;
    }
  },
  methods: {
    ...mapActions("info", ["init", "getClasses", "getProperties"]),
    ...mapActions("placeHolderFormat", ["getFormats"]),
    onClassChanged() {
      this.getProperties(this.item.class);
    },
    onFormatChanged(item) {
      let val = this.formats.find(f => f.displayName == item.target.value);
      this.item.formatTemplate = val.format;
    },
    onItemAdd() {
      this.message = undefined;
      let msg = "";

      if (this.selectedClass !== undefined) {
        this.item.class = this.selectedClass;
      }

      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);
      }
    },
    async loadData() {
      await this.init();
      await this.getFormats();
      await this.getProperties(this.selectedClass);
    }
  }
};
</script>
