<template>
  <div v-if="selectedWidget.row == null">
    <div v-b-toggle.rowproperties class="vb-body-right-option pointer option-head">Row Properties</div>
    <b-collapse id="rowproperties" visible>
      <div class="container vb-p-10">
        <div class="row">
          <div class="col-md-6">
            <span class="font-12">Background Color</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <colorpicker
                :color="widgetType[selectedWidget.parentRow].style[2].bgcolor"
                v-model="widgetType[selectedWidget.parentRow].style[2].bgcolor"
              />
            </span>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-6">
            <span class="font-12">Content Background Color</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <colorpicker
                :color="widgetType[selectedWidget.parentRow].style[2].cbgcolor"
                v-model="widgetType[selectedWidget.parentRow].style[2].cbgcolor"
              />
            </span>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-6">
            <span class="font-12">Background Image</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <b-btn size="sm">SelectImage</b-btn>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="file-upload">
            <div class="image-upload-wrap">
              <input
                class="file-upload-input"
                type="file"
                @change="onFileSlected($event)"
                accept="image/*"
              />
              <div class="drag-text" v-if="widgetType[selectedWidget.parentRow].imgurl == ''">
                <span>Please Select Image</span>
              </div>
              <div v-else>
                <img
                  class="file-upload-image"
                  :src="widgetType[selectedWidget.parentRow].imgurl"
                  alt="your image"
                  style="max-width: 100%; max-height: 92px;"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <b-input-group size="sm">
              <b-input-group-text slot="prepend">URL</b-input-group-text>
              <b-form-input v-model="widgetType[selectedWidget.parentRow].imgurl" />
            </b-input-group>
          </div>
        </div>
        <div class="row">
          <div style="margin: 10px; margin-bottom: 0px">
            <span class="font-12">Full Width</span>
          </div>
          <div style="margin: 10px; margin-bottom: 0px">
            <span class="float-left">
              <b-form-checkbox-group
                switches
                @change="toggleImgValue('width',$event)"
                :options="paddingoption"
              />
            </span>
          </div>
        </div>
        <div class="row">
          <div style="margin: 10px; margin-bottom: 0px">
            <span class="font-12">Repeat</span>
          </div>
          <div style="margin: 10px; margin-bottom: 0px">
            <span class="float-left">
              <b-form-checkbox-group
                switches
                @change="toggleImgValue('repeat',$event)"
                :options="paddingoption"
              />
            </span>
          </div>
        </div>
        <div class="row">
          <div style="margin: 10px; margin-bottom: 0px">
            <span class="font-12">Center</span>
          </div>
          <div style="margin: 10px; margin-bottom: 0px">
            <span class="float-left">
              <b-form-checkbox-group
                switches
                @change="toggleImgValue('position',$event)"
                :options="paddingoption"
              />
            </span>
          </div>
        </div>
        <hr />
        <!-- padding -->
        <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>
        <!-- paddding end -->
      </div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  name: "row-properties",
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {
      padding: this.widgetType[this.selectedWidget.parentRow].style[1][
        "padding"
      ],
      paddingRight: this.widgetType[this.selectedWidget.parentRow].style[1][
        "paddingRight"
      ],
      paddingLeft: this.widgetType[this.selectedWidget.parentRow].style[1][
        "paddingLeft"
      ],
      paddingTop: this.widgetType[this.selectedWidget.parentRow].style[1][
        "paddingTop"
      ],
      paddingBottom: this.widgetType[this.selectedWidget.parentRow].style[1][
        "paddingBottom"
      ],
      onebyselected: [], // Must be an array reference!
      paddingoption: [
        {
          text: "",
          value: "true"
        }
      ]
    };
  },
  methods: {
    toggleImgValue(type, event) {
      console.log(event);
      switch (type) {
        case "repeat":
          if (event[0]) {
            this.widgetType[this.selectedWidget.parentRow].repeat = "repeat";
          } else {
            this.widgetType[this.selectedWidget.parentRow].repeat = "no-repeat";
          }
          break;
        case "position":
          if (event[0]) {
            this.widgetType[this.selectedWidget.parentRow].position =
              "center top";
          } else {
            this.widgetType[this.selectedWidget.parentRow].position =
              "left top";
          }

          break;
        case "width":
          if (event[0]) {
            this.widgetType[this.selectedWidget.parentRow].width = true;
          } else {
            this.widgetType[this.selectedWidget.parentRow].width = false;
          }

          break;
      }
    },
    onFileSlected(event) {
      if (event.target.files && event.target.files[0]) {
        this.selectFile = event.target.files[0];
        var reader = new FileReader();
        reader.onload = e => {
          this.imageData = e.target.result;
          this.postApi.imageUpload(this.selectFile).then(response => {
            console.log(response);
            this.widgetType[this.selectedWidget.parentRow].imgurl =
              response.data[0].files;
          });
        };
        reader.readAsDataURL(event.target.files[0]);
      }
    },
    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].style[1][
          "paddingRight"
        ] = this.paddingRight;
        this.widgetType[this.selectedWidget.parentRow].style[1][
          "paddingLeft"
        ] = this.paddingLeft;
        this.widgetType[this.selectedWidget.parentRow].style[1][
          "paddingTop"
        ] = this.paddingTop;
        this.widgetType[this.selectedWidget.parentRow].style[1][
          "paddingBottom"
        ] = this.paddingBottom;
      } else {
        this.padding = this.paddingTop;
        this.widgetType[this.selectedWidget.parentRow].style[1][
          "padding"
        ] = this.padding;
      }
    },
    globalAdd(name, value) {
      switch (name) {
        case "padding":
          this.widgetType[this.selectedWidget.parentRow].style[1][
            "padding"
          ] = value;
          break;
        case "paddingRight":
          this.widgetType[this.selectedWidget.parentRow].style[1][
            "paddingRight"
          ] = value;
          break;
        case "paddingLeft":
          this.widgetType[this.selectedWidget.parentRow].style[1][
            "paddingLeft"
          ] = value;
          break;
        case "paddingTop":
          this.widgetType[this.selectedWidget.parentRow].style[1][
            "paddingTop"
          ] = value;

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

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

<style>
</style>
