<template>
  <div style="padding-bottom: 10px">
    <div class="vb-body-right-option pointer option-head">Image</div>

    <div class="container vb-p-10" v-if="widgetData.type == 'image_widget'">
      <div class="row">
        <div class="col-md-12 font-12">Please Select Image</div>
      </div>

      <!-- <img class="file-upload-image" :src="imagelink"  alt="your image" /> -->
      <ImageSelection
        v-on:onFileSlected="onFileSlected($event)"
        :imageUrl="widgetData.style.imgurl"
      />
      <hr />
      <div class="row">
        <div class="col-md-6">
          <div>
            <span class="font-12">Image Size</span>
          </div>
          <InputButton
            v-on:leftButton="lowsize()"
            v-on:rightButton="highsize()"
            v-on:onInput="widgetData.style.imgsize = $event"
            :value="widgetData.style.imgsize"
          />
        </div>

        <div class="col-md-6">
          <span class="float-right">
            <div>
              <span class="font-12">Postion</span>
            </div>
            <div class="container">
              <div class="row" style="font-size: 0.875rem">
                <button
                  v-on:click="setposition('left')"
                  class="ti ti-align-left input-button-left"
                />
                <button
                  v-on:click="setposition('center')"
                  class="ti ti-align-center input-style"
                />
                <button
                  v-on:click="setposition('right')"
                  class="ti ti-align-right input-button-right"
                />
              </div>
            </div>
            <!-- <b-btn-group size="sm">
              <b-btn v-on:click="setposition('left')">
                <span class="ti-align-left"></span>
              </b-btn>
              <b-btn v-on:click="setposition('center')">
                <span class="ti-align-center"></span>
              </b-btn>
              <b-btn v-on:click="setposition('right')">
                <span class="ti-align-right"></span>
              </b-btn>
            </b-btn-group>-->
          </span>
        </div>
      </div>
    </div>

    <div
      class="container vb-p-10"
      v-else
      v-for="(image, index) in widgetData.text.images"
    >
      <ImageSelection
        v-on:onFileSlected="onFileSlected($event, index)"
        :imageUrl="image.imageUrl"
      />

      <div class="row">
        <div class="col-md-12">
          <div>
            <span class="font-12">Image Caption {{ index + 1 }}</span>
          </div>
          <div>
            <b-form-input type="text" v-model="image.caption" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import InputButton from "./common/input-button";
import ImageSelection from "@/temp/webform/properties/components/ImageSelection";

export default {
  components: {
    ImageSelection,
    InputButton,
  },
  props: {
    widgetData: Object,
  },
  data() {
    return {
      imageSize: this.widgetData.style.imgsize,
      imageData: null,
    };
  },
  methods: {
    onFileSlected(event, index = 0) {
      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);
            console.log("res files", response.data[0].files);
            if (this.widgetData.type == "image_widget")
              this.widgetData.style.imgurl = response.data[0].files;
            else if (this.widgetData.type == "image_slider_widget")
              this.widgetData.text.images[index].imageUrl =
                response.data[0].files;
          });
        };
        reader.readAsDataURL(event.target.files[0]);
      }
    },
    highsize() {
      if (this.imageSize < 100) {
        this.imageSize = this.imageSize + 5;
        this.widgetData.style.imgsize = this.imageSize;
      }
    },
    lowsize() {
      if (this.imageSize > 5) {
        this.imageSize--;
        this.imageSize = this.imageSize - 4;
        this.widgetData.style.imgsize = this.imageSize;
      }
    },
    setposition(postion) {
      this.widgetData.style.position = postion;
    },
  },
};
</script>

<style>
.input-style {
  border: none;
  background-color: #6c757d;
  color: white;
  text-align: center;
  height: 30px;
}

.input-button-left {
  border: none;
  background-color: #6c757d;
  color: white;
  text-align: center;
  border-radius: 0.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 30px;
}
.input-button-right {
  height: 30px;
  border: none;
  background-color: #6c757d;
  color: white;
  text-align: center;
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.file-upload {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: #1fb264;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #15824b;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: #6c9229;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all 0.2s ease;
}

.file-upload-content {
  /* display: none; */
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  border: 4px dashed #6c9229;
  position: relative;
  height: 100px;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color: #6c9229;
  border: 4px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text > span {
  font-weight: 100;
  text-transform: uppercase;
  color: #6c9229;
  line-height: 90px;
  font-size: 20px;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all 0.2s ease;
}
</style>
