<template>
  <div>
    <div class="row">
      <div class="col-md-6">
        <span class="font-12">Padding</span>
      </div>
      <div class="col-md-6">
        <span class="float-right">
          <b-form-checkbox-group
            switches
            v-model="onebyselected"
            @change="setAllValues($event)"
            :options="paddingoption"
          />
        </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="globalAdd('padding', padding > 0 ? --padding : padding)"
            >-</b-btn>
            <b-btn size="sm">{{padding}}</b-btn>
            <b-btn size="sm" v-on:click="globalAdd('padding', ++padding)">+</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="globalAdd('paddingTop', paddingTop > 0 ? --paddingTop : paddingTop)"
              >-</b-btn>
              <b-btn size="sm">{{paddingTop}}</b-btn>
              <b-btn size="sm" v-on:click="globalAdd('paddingTop', ++paddingTop)">+</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="globalAdd('paddingRight', paddingRight > 0 ? --paddingRight : paddingRight)"
              >-</b-btn>
              <b-btn size="sm">{{paddingRight}}</b-btn>
              <b-btn size="sm" v-on:click="globalAdd('paddingRight', ++paddingRight)">+</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="globalAdd('paddingLeft', paddingLeft > 0 ? --paddingLeft : paddingLeft)"
              >-</b-btn>
              <b-btn size="sm">{{paddingLeft}}</b-btn>
              <b-btn size="sm" v-on:click="globalAdd('paddingLeft', ++paddingLeft)">+</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="globalAdd('paddingBottom', paddingBottom > 0 ? --paddingBottom : paddingBottom)"
              >-</b-btn>
              <b-btn size="sm">{{paddingBottom}}</b-btn>
              <b-btn size="sm" v-on:click="globalAdd('paddingBottom', ++paddingBottom)">+</b-btn>
            </b-btn-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "padding",
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      padding: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[1]["padding"],
      paddingRight: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[1]["paddingRight"],
      paddingLeft: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[1]["paddingLeft"],
      paddingTop: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[1]["paddingTop"],
      paddingBottom: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[1]["paddingBottom"],

      onebyselected: [], // Must be an array reference!
      oneborderselected: [],
      borderoptions: [
        {
          text: "",
          value: "true"
        }
      ],
      paddingoption: [
        {
          text: "",
          value: "true"
        }
      ]
    };
  },
  methods: {
    setAllValues(value) {
      if (value[0]) {
        this.paddingRight = this.padding;
        this.paddingLeft = this.padding;
        this.paddingTop = this.padding;
        this.paddingBottom = this.padding;

        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingRight"] = this.paddingRight;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingLeft"] = this.paddingLeft;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingTop"] = this.paddingTop;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingBottom"] = this.paddingBottom;
      } else {
        this.padding = this.paddingTop;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["padding"] = this.padding;
      }
    },
    globalAdd(name, value) {
      switch (name) {
        case "padding":
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[1]["padding"] = value;
          break;
        case "paddingRight":
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[1]["paddingRight"] = value;
          break;
        case "paddingLeft":
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[1]["paddingLeft"] = value;
          break;
        case "paddingTop":
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[1]["paddingTop"] = value;

          break;
        case "paddingBottom":
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[1]["paddingBottom"] = value;
          break;

        default:
        // code block
      }
    }
  }
};
</script>



