<template>
  <div>
    <div class="row">
      <div class="col-md-6">
        <span class="font-12">{{fieldValues.name}}</span>
      </div>
      <div class="col-md-6">
        <span class="float-right">
          <b-form-checkbox-group
            switches
            v-model="onebyselected"
            :options="paddingoption"
            @change="toggle($event)"
          />
        </span>
      </div>
    </div>
    <div class="row vb-p-10" v-if="onebyselected.length == 0">
      <div class="col-md-6">
        <div>
          <span class="font-12">All Sides</span>
        </div>
        <div>
          <b-btn-group>
            <b-btn size="sm" v-on:click="minusByOne('all')">-</b-btn>
            <b-btn size="sm">{{allSides[fieldValues.top]}}</b-btn>
            <b-btn size="sm" v-on:click="addByOne('all')">+</b-btn>
          </b-btn-group>
        </div>
      </div>
    </div>
    <div class="vb-p-10" v-else>
      <div class="row">
        <div class="col-md-6">
          <div>
            <span class="font-12">Top</span>
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="minusByOne('top')">-</b-btn>
              <b-btn size="sm">{{allSides[fieldValues.top]}}</b-btn>
              <b-btn size="sm" v-on:click="addByOne('top')">+</b-btn>
            </b-btn-group>
          </div>
        </div>
        <div class="col-md-6">
          <div>
            <span class="font-12">Right</span>
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="minusByOne('right')">-</b-btn>
              <b-btn size="sm">{{allSides[fieldValues.right]}}</b-btn>
              <b-btn size="sm" v-on:click="addByOne('right')">+</b-btn>
            </b-btn-group>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div>
            <span class="font-12">Left</span>
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="minusByOne('left')">-</b-btn>
              <b-btn size="sm">{{allSides[fieldValues.left]}}</b-btn>
              <b-btn size="sm" v-on:click="addByOne('left')">+</b-btn>
            </b-btn-group>
          </div>
        </div>
        <div class="col-md-6">
          <div>
            <span class="font-12">Bottom</span>
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="minusByOne('bottom')">-</b-btn>
              <b-btn size="sm">{{allSides[fieldValues.bottom]}}</b-btn>
              <b-btn size="sm" v-on:click="addByOne('bottom')">+</b-btn>
            </b-btn-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "allSideToggle",
  props: {
    allSides: Object,
    fieldValues: Object
  },
  data() {
    return {
      paddingoption: [
        {
          text: "",
          value: "true"
        }
      ],
      onebyselected: []
    };
  },
  created() {
    var t = this.allSides[this.fieldValues.top];
    var b = this.allSides[this.fieldValues.bottom];
    var r = this.allSides[this.fieldValues.right];
    var l = this.allSides[this.fieldValues.left];

    // console.log((t == b) == (r == l));

    if ((t == b) == (r == l)) {
    } else {
      this.onebyselected = ["true"];
    }
  },
  methods: {
    addByOne(value) {
      if (value == "all") {
        this.allSides[this.fieldValues.top]++;
        this.allSides[this.fieldValues.bottom]++;
        this.allSides[this.fieldValues.right]++;
        this.allSides[this.fieldValues.left]++;
      } else {
        this.allSides[this.fieldValues[value]]++;
      }
    },
    minusByOne(value) {
      if (value == "all") {
        if (this.allSides[this.fieldValues.top] > 0) {
          this.allSides[this.fieldValues.top]--;
          this.allSides[this.fieldValues.bottom]--;
          this.allSides[this.fieldValues.right]--;
          this.allSides[this.fieldValues.left]--;
        }
      } else {
        if (this.allSides[this.fieldValues[value]] > 0) {
          this.allSides[this.fieldValues[value]]--;
        }
      }
    },
    toggle(event) {
      if (!event[0]) {
        this.allSides[this.fieldValues.bottom] = this.allSides[
          this.fieldValues.top
        ];
        this.allSides[this.fieldValues.right] = this.allSides[
          this.fieldValues.top
        ];
        this.allSides[this.fieldValues.left] = this.allSides[
          this.fieldValues.top
        ];
      }
    }
  }
};
</script>

<style>
</style>
