<template>
  <div style="padding-bottom: 10px">
    <div class="vb-body-right-option pointer option-head">General</div>
    <div class="container">
      <div class="row">
        <div class="col">
          <span class="font-12">{{fieldValues.name}}</span>
        </div>
        <div class="custom-control custom-switch col-md-auto">
          <input
            type="checkbox"
            class="custom-control-input"
            id="customSwitch1"
            @click="isToggled = !isToggled, toggle()"
          />
          <label class="custom-control-label" for="customSwitch1"></label>
        </div>
      </div>
      <div v-if="!isToggled">
        <div>
          <div>
            <span class="font-12">All Sides</span>
          </div>
          <InputButton
            v-on:leftButton="minusByOne('all')"
            v-on:rightButton="addByOne('all')"
            v-on:onInput="onInput($event, 'all')"
            :value="allSides[fieldValues.top]"
          />
        </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>
              <InputButton
                v-on:leftButton="minusByOne('top')"
                v-on:rightButton="addByOne('top')"
                v-on:onInput="allSides[fieldValues.top] = $event"
                :value="allSides[fieldValues.top]"
              />
            </div>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Right</span>
            </div>
            <div>
              <InputButton
                v-on:leftButton="minusByOne('right')"
                v-on:rightButton="addByOne('right')"
                v-on:onInput="allSides[fieldValues.right] = $event"
                :value="allSides[fieldValues.right]"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Left</span>
            </div>
            <div>
              <InputButton
                v-on:leftButton="minusByOne('left')"
                v-on:rightButton="addByOne('left')"
                v-on:onInput="allSides[fieldValues.left] = $event"
                :value="allSides[fieldValues.left]"
              />
            </div>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Bottom</span>
            </div>
            <div>
              <InputButton
                v-on:leftButton="minusByOne('bottom')"
                v-on:rightButton="addByOne('bottom')"
                v-on:onInput="allSides[fieldValues.bottom] = $event"
                :value="allSides[fieldValues.bottom]"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import InputButton from "./common/input-button";
export default {
  name: "general",
  components: {
    InputButton
  },
  props: {
    allSides: Object,
    fieldValues: Object
  },
  data() {
    return {
      isToggled: false
      //   value: 0
    };
  },
  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];

    if (t != b || t != l || t != r) {
      this.isToggled = true;
    }
  },
  methods: {
    onInput(value, isAll = "one") {
      if (isAll == "all") {
        this.allSides[this.fieldValues.top] = value;
        this.allSides[this.fieldValues.bottom] = value;
        this.allSides[this.fieldValues.left] = value;
        this.allSides[this.fieldValues.right] = value;
      }
    },
    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() {
      if (!this.isToggled) {
        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>
