<template>
  <properties-card title="Image">
    <p class="p-h">Please Select Image</p>

    <div v-if="widgetData.type === 'ImageWidget'">
      <!-- <img class="file-upload-image" :src="imagelink"  alt="your image" /> -->
      <ImageSelection
        v-on:onFileSelected="onFileSelected($event)"
        @imageUrl="widgetData.style.imageUrl = $event"
        :imageUrl="widgetData.style.imageUrl"
      />
      <v-divider class="mb-5" />
      <v-container>
        <v-row justify="space-between">
          <div>
            <p class="p-h ma-0">Image Size</p>
            <input-button
              v-on:leftButton="lowsize()"
              v-on:rightButton="highsize()"
              v-on:onInput="widgetData.style.imageSize = $event"
              :value="widgetData.style.imageSize"
            />
          </div>

          <div>
            <p class="p-h ma-0">Position</p>
            <div>
              <button
                v-on:click="setposition('left')"
                class="input-style button-left pa-1"
              >
                <v-icon color="white" dense>mdi-format-align-left</v-icon>
              </button>
              <button
                v-on:click="setposition('center')"
                class="input-style pa-1"
              >
                <v-icon color="white" dense>mdi-format-align-center</v-icon>
              </button>
              <button
                v-on:click="setposition('right')"
                class="input-style button-right pa-1"
              >
                <v-icon color="white" dense>mdi-format-align-right</v-icon>
              </button>
            </div>
          </div>
        </v-row>
      </v-container>
    </div>

    <div
      class="container vb-p-10"
      v-else
      v-for="(image, index) in widgetData.text.images"
    >
      <span class="p-h">Image Caption {{ index + 1 }}</span>
      <ImageSelection
        v-on:onFileSlected="onFileSelected($event, index)"
        @imageUrl="image.url = $event"
        :imageUrl="image.url"
      />

      <v-container class="pa-2 pt-0">
        <v-text-field
          v-model="image.caption"
          :label="'Image Caption ' + (index + 1)"
          hide-details="auto"
          dense
          outlined
        ></v-text-field>
      </v-container>
    </div>
  </properties-card>
</template>

<script>
import InputButton from "./components/InputButton";
import ImageSelection from "@/components/properties/components/ImageSelection";
import PropertiesCard from "@/components/properties/components/PropertiesCard";

export default {
  components: {
    PropertiesCard,
    ImageSelection,
    InputButton,
  },
  props: {
    widgetData: Object,
  },
  data() {
    return {
      imageSize: this.widgetData.style.imageSize,
      imageData: null,
    };
  },
  created() {
    this.$emit("visible");
  },
  methods: {
    onFileSelected(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.imageUrl = 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.imageSize = this.imageSize;
      }
    },
    lowsize() {
      if (this.imageSize > 5) {
        this.imageSize--;
        this.imageSize = this.imageSize - 4;
        this.widgetData.style.imageSize = this.imageSize;
      }
    },
    setposition(postion) {
      this.widgetData.style.position = postion;
    },
  },
};
</script>

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

.button-left {
  min-width: 25px;
  border-radius: 0.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button-right {
  min-width: 25px;
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>
