<script>
import {castId, keyBy, objCopy, isEmpty} from "../utils";
import forEach from "lodash-es/forEach";
import axios from "axios";
import isEqual from "lodash-es/isEqual";

export default {
  props: ['model_id', 'schema', 'objects'],
  name: "NewObjectForm",
  data() {
    const model = this.schema.obj_models.find((m) => m.id === this.model_id);
    let properties = this.schema.prop_models.filter((m) => m.object === model.id);
    let relations = this.schema.rel_models.filter((m) => m.object === model.id);

    let values = {};
    properties.forEach((p) => {
      if (p.optional) {
        values[p.id] = [];
      } else {
        values[p.id] = [objCopy(p.default)];
      }
    });

    let propertiesById = keyBy(properties, 'id');
    let relationsById = keyBy(relations, 'id');

    let model_names = {};
    this.schema.obj_models.forEach((m) => {
      model_names[m.id] = m.name;
    });

    return {
      model,
      properties,
      relations,
      propertiesById,
      relationsById,
      haveRelations: !isEmpty(relations),
      model_names,
      values,
      relationRefs: [],
    }
  },
  methods: {
    /** Get values in the raw format without grouping */
    collectData() {
      let values = [];
      forEach(objCopy(this.values), (vv, prop_model_id) => {
        for (let v of vv) {
          if (isEqual(v, {"String": ""}) && this.properties[prop_model_id].optional) {
            continue;
          }

          values.push({
            model: castId(prop_model_id),
            value: v
          })
        }
      })

      let relations = [];
      for (let rref of this.relationRefs) {
        for (let r of rref.collectData()) {
          relations.push(r);
        }
      }

      return {
        model: this.model.id,
        values,
        relations,
      };
    },

    trySave() {
      let data;
      try {
        data = this.collectData();
      } catch (e) {
        alert(e.message);
        return;
      }
      console.log('Try save', data);

      axios({
        method: 'post',
        url: '/object/create',
        data: data
      })
      .then(function (response) {
        location.href = '/objects';
      })
      .catch(function (error) {
        // TODO show error toast instead
        alert(error.response ?
            error.response.data :
            error)
      });
    },

    setRelationRef(el) {
      if (el) {
        this.relationRefs.push(el)
      }
    },
  },
  beforeUpdate() {
    this.relationRefs = []
  },
  mounted() {
    this.$el.parentNode
        .classList.add('EditForm');
  }
}
</script>

<template>
  <div class="container">
    <div class="cols">
      <div class="col col-9">
        <h1>New {{ model.name }}</h1>
      </div>
      <div class="col col-3 text-right">
        <button @click="trySave" class="btn btn-primary">
          <i class="icon icon-check"></i>Save
        </button>
      </div>
    </div>
  </div>

  <div class="form-horizontal container">
    <property v-for="(property, pi) in properties" :model="property" :values="values[property.id]" :key="pi"></property>
  </div>

  <div v-if="haveRelations">
    <h3>Relations</h3>

    <new-relation
        v-for="relation in relations"
        :ref="setRelationRef"
        :model_id="relation.id"
        :objects="objects"
        :schema="schema"
    ></new-relation>
  </div>
</template>
