<template>
  <div>
    <div v-b-toggle.spaceing class="vb-body-right-option pointer option-head">SPACING</div>
    <b-collapse id="spaceing" visible>
      <div class="container vb-p-10">
        <!-- text -->
        <div class="row" style="margin-top: 20px">
          <div class="col-md-6">
            <span class="font-12">Text Align</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <b-btn-group size="sm">
                <b-btn @click="updateAlignment('left')">
                  <span class="ti-align-left"></span>
                </b-btn>
                <b-btn @click="updateAlignment('center')">
                  <span class="ti-align-center"></span>
                </b-btn>
                <b-btn @click="updateAlignment('right')">
                  <span class="ti-align-right"></span>
                </b-btn>
              </b-btn-group>
            </span>
          </div>
        </div>
        <!-- text end -->
        <hr />
        <!-- line height -->
        <div class="row">
          <div class="col-md-6">
            <span class="font-12">Line Height</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <b-btn-group>
                <b-btn
                  size="sm"
                  v-on:click="widgetType[selectedWidget.parentRow].columns[
        selectedWidget.column
      ].rows[selectedWidget.row].style[3]['lineHeight'] -= 10"
                >-</b-btn>
                <b-btn size="sm">
                  {{widgetType[selectedWidget.parentRow].columns[
                  selectedWidget.column
                  ].rows[selectedWidget.row].style[3].lineHeight + '%'}}
                </b-btn>
                <b-btn
                  size="sm"
                  v-on:click="widgetType[selectedWidget.parentRow].columns[
        selectedWidget.column
      ].rows[selectedWidget.row].style[3]['lineHeight'] += 10"
                >+</b-btn>
              </b-btn-group>
            </span>
          </div>
        </div>
        <!-- line height end -->
        <hr />
        <!-- border -->

        <!-- <div class="row">
          <div class="col-md-6">
            <span class="font-12">Border</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <b-form-checkbox-group switches v-model="oneborderselected" :options="borderoptions"/>
            </span>
          </div>
        </div>
        <div class="row vb-p-10" v-if="oneborderselected.length == 0">
          <div class="col-md-6">
            <div>
              <span class="font-12">All Sides</span>
            </div>
            <div>
              <b-form-select
                v-model="allborderselected"
                :options="allborderoptions"
                size="sm"
                class="vb-mB-5"
              />
            </div>
            <div>
              <b-btn-group>
                <b-btn size="sm" v-on:click="''">-</b-btn>
                <b-btn size="sm">{{padding}}</b-btn>
                <b-btn size="sm" v-on:click="''">+</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-form-select
                  v-model="allborderselected"
                  :options="allborderoptions"
                  size="sm"
                  class="vb-mB-5"
                />
              </div>
              <div>
                <b-btn-group>
                  <b-btn size="sm" v-on:click="''">-</b-btn>
                  <b-btn size="sm">{{padding}}</b-btn>
                  <b-btn size="sm" v-on:click="''">+</b-btn>
                </b-btn-group>
              </div>
            </div>
            <div class="col-md-6">
              <div>
                <span class="font-12">Right</span>
              </div>
              <div>
                <b-form-select
                  v-model="allborderselected"
                  :options="allborderoptions"
                  size="sm"
                  class="vb-mB-5"
                />
              </div>
              <div>
                <b-btn-group>
                  <b-btn size="sm" v-on:click="''">-</b-btn>
                  <b-btn size="sm">{{padding}}</b-btn>
                  <b-btn size="sm" v-on:click="''">+</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-form-select
                  v-model="allborderselected"
                  :options="allborderoptions"
                  size="sm"
                  class="vb-mB-5"
                />
              </div>
              <div>
                <b-btn-group>
                  <b-btn size="sm" v-on:click="''">-</b-btn>
                  <b-btn size="sm">{{padding}}</b-btn>
                  <b-btn size="sm" v-on:click="''">+</b-btn>
                </b-btn-group>
              </div>
            </div>
            <div class="col-md-6">
              <div>
                <span class="font-12">Bottom</span>
              </div>
              <div>
                <b-form-select
                  v-model="allborderselected"
                  :options="allborderoptions"
                  size="sm"
                  class="vb-mB-5"
                />
              </div>
              <div>
                <b-btn-group>
                  <b-btn size="sm" v-on:click="''">-</b-btn>
                  <b-btn size="sm">{{''}}</b-btn>
                  <b-btn size="sm" v-on:click="''">+</b-btn>
                </b-btn-group>
              </div>
            </div>
          </div>
        </div>-->
        <!-- border start -->
        <div class="row" style="margin-top: 15px; margin-bottom: 15px">
          <div class="col-md-6">
            <span class="font-12">Border</span>
          </div>
          <div class="col-md-6">
            <span class="float-right" style="display: flex; align-items: center">
              <div style="margin-right: 20px">
                <colorpicker
                  :color="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[3]['borderColor']"
                  v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[3]['borderColor']"
                />
              </div>
              <b-btn-group>
                <b-btn
                  size="sm"
                  v-on:click="widgetType[selectedWidget.parentRow].columns[
                  selectedWidget.column
                  ].rows[selectedWidget.row].style[3]['borderWidth']--"
                >-</b-btn>
                <b-btn size="sm">
                  {{widgetType[selectedWidget.parentRow].columns[
                  selectedWidget.column
                  ].rows[selectedWidget.row].style[3].borderWidth}}
                </b-btn>
                <b-btn
                  size="sm"
                  v-on:click="widgetType[selectedWidget.parentRow].columns[
                  selectedWidget.column
                  ].rows[selectedWidget.row].style[3]['borderWidth']++"
                >+</b-btn>
              </b-btn-group>
            </span>
          </div>
        </div>

        <hr />
        <!-- Rounded border end -->
        <div class="row" style="margin-top: 15px; margin-bottom: 15px">
          <div class="col-md-6">
            <span class="font-12">Rounded Border</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <b-btn-group>
                <b-btn
                  size="sm"
                  v-on:click="widgetType[selectedWidget.parentRow].columns[
                  selectedWidget.column
                  ].rows[selectedWidget.row].style[3]['borderRadius']--"
                >-</b-btn>
                <b-btn size="sm">
                  {{widgetType[selectedWidget.parentRow].columns[
                  selectedWidget.column
                  ].rows[selectedWidget.row].style[3].borderRadius}}
                </b-btn>
                <b-btn
                  size="sm"
                  v-on:click="widgetType[selectedWidget.parentRow].columns[
                  selectedWidget.column
                  ].rows[selectedWidget.row].style[3]['borderRadius']++"
                >+</b-btn>
              </b-btn-group>
            </span>
          </div>
        </div>
        <hr />

        <div class="row"></div>
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Button Text Color</span>
            </div>
            <div>
              <colorpicker
                :color="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2]['tcolor']"
                v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2]['tcolor']"
              />
            </div>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Button Background Color</span>
            </div>
            <div>
              <colorpicker
                :color="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2]['bgcolor']"
                v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2]['bgcolor']"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Button Hover Color</span>
            </div>
            <div>
              <colorpicker
                :color="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2]['hcolor']"
                v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2]['hcolor']"
              />
            </div>
          </div>
        </div>

        <hr>

        <!-- padding start -->
        <allSideToggle
          :allSides="this.widgetType[this.selectedWidget.parentRow].columns[
        this.selectedWidget.column
      ].rows[this.selectedWidget.row].style[3].btnPadding"
          :fieldValues="{name: 'Padding', top: 'paddingTop',bottom: 'paddingBottom',left: 'paddingLeft',right: 'paddingRight'}"
        ></allSideToggle>
        <!-- padding end -->
      </div>
    </b-collapse>
  </div>
</template>

<script>
import allSideToggle from "./allSideToggle";
export default {
  name: "spaceing",
  components: {
    allSideToggle
  },
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {
      alignButtons: [
        { caption: "Toggle 1", state: false },
        { caption: "Toggle 2", state: false },
        { caption: "Toggle 3", state: false },
        { caption: "Toggle 4", state: false }
      ],
      allborderselected: null,
      allborderoptions: [
        {
          value: "solid",
          text: "solid"
        },
        {
          value: "dotted",
          text: "Dotted"
        },
        {
          value: "dashed",
          text: "Dashed"
        }
      ],
      oneborderselected: [],

      borderoptions: [
        {
          text: "",
          value: "true"
        }
      ]
    };
  },
  methods: {
    updateAlignment(value) {
      this.widgetType[this.selectedWidget.parentRow].columns[
        this.selectedWidget.column
      ].rows[this.selectedWidget.row].style[3]["alignment"] = value;
    }
  }
};
</script>

<style>
</style>
