<template>
  <main id="main" style="margin-top:-20px; padding-bottom:50px">
    <div class="container">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="section-header">
              <h2>Carousel</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="container col-md-12" style="text-align:left">
        <div class="form-goup row">
          <div class="col-md-4">
            <label>Type</label>
            <div class="input-group-prepend">
              <select class="form-control" v-model="selectedType">
                <option value="Timeshare">Timeshare</option>
                <option value="Property">Property</option>
              </select>
              <button
                type="button"
                class="input-group-text fa fa-search"
                style="color: #60CBEB"
                data-toggle="modal"
                data-target="#myModal"
              ></button>
              <!-- Modal content-->
              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div padding-left="20px">
                      <Search :name="selectedType" @onSelected="onSelected" />
                    </div>
                    <div class="modal-footer">
                      <button
                        type="button"
                        class="btn btn-b-n"
                        style="width: 150px; height:40px;"
                        data-dismiss="modal"
                      >
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Modal content END-->
            </div>
          </div>
        </div>
        <div class="form-goup row">
          <div class="col-md-4">
            <br />
            <label>Header</label>
            <input class="form-control" type="text" v-model="carousel.header" />
          </div>
        </div>
        <div class="form-goup row">
          <div class="col-md-4">
            <br />
            <label>Description</label>
            <p v-if="selectedType === 'Property'" v-html="propDescription" />
            <ul v-if="selectedType === 'Timeshare' && bedrooms" class="list">
              <li class="d-flex justify-content-between">
                <strong>
                  <i class="fa fa-bed"></i>
                  &nbsp&nbsp&nbspBedrooms:
                </strong>
                <span>{{ bedrooms }}</span>
              </li>
              <li class="d-flex justify-content-between">
                <strong> <i class="fa fa-users"></i>&nbsp&nbsp&nbspSleeps: </strong>
                <span>{{ sleeps }}</span>
              </li>
              <li class="d-flex justify-content-between">
                <strong> <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck in: </strong>
                <span>{{ arrival }}</span>
              </li>
              <li class="d-flex justify-content-between">
                <strong> <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck out: </strong>
                <span>{{ departure }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-2">
            <label>Image</label>
          </div>
        </div>
        <div v-if="selectedType === 'Timeshare'">
          <div>
            <Images :allowMultiple="false" :loadedImages="loadedImages" />
          </div>
        </div>
        <div class="form-group row" v-if="selectedType === 'Property'">
          <div class="col-md-2" v-for="(img, i) in propertyImages" :key="i">
            <input type="radio" name="image" @click="setImage(img)" />
            <label for="checkbox" style="margin: 10px;">Set</label>
            <br />
            <img :src="img.image" style="height:200px; width:150px; object-fit: cover;" />
          </div>
        </div>
        <div class="form-group row">
          <button
            type="button"
            @click="SaveData()"
            class="btn btn-b-n"
            style="width: 85px; height:40px;"
          >
            Save
          </button>
          <button
            type="button"
            @click="Close()"
            class="btn btn-b-n"
            style="width: 85px; height:40px;"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Search from "./carouselSearch.vue";
import Images from "../../property/propertyImage.vue";

export default {
  name: "CarouselItem",
  components: {
    Search,
    Images
  },
  data() {
    return {
      selectedType: "Timeshare",
      propDescription: "",
      bedrooms: "",
      sleeps: "",
      arrival: Date,
      departure: Date,
      images: []
    };
  },
  computed: {
    ...mapState("carousel", ["carousel"]),
    ...mapState("property", ["propertyImages"])
  },
  mounted() {
    this.getCarouselItem(this.$route.params.id);
  },
  methods: {
    ...mapActions("carousel", ["saveCarouselItem", "getCarouselItem"]),
    ...mapActions("property", ["getSavedPropertyImages"]),
    onSelected(item) {
      if (this.selectedType === "Timeshare") {
        this.carousel.header = item.resort.resortName;
        this.bedrooms = item.bedrooms;
        this.sleeps = item.maxSleep;
        this.arrival = item.arrivalDate;
        this.departure = item.departureDate;
        this.carousel.timeshareID = item.id;
      } else {
        this.propertyImages = [];
        this.carousel.header = item.name;
        this.propDescription = item.carouselDescription;
        this.carousel.propertyID = item.id;
        this.getSavedPropertyImages(item.id);
      }
    },
    setImage(img) {
      this.carousel.image = img.image;
    },
    loadedImages(values) {
      this.images = values;
    },
    Close() {
      this.$router.push("/carousel");
    },
    SaveData() {
      if (this.selectedType === "Timeshare") {
        // eslint-disable-next-line no-plusplus
        for (let i = 0; i < this.images.length; i++) {
          this.carousel.image = this.images[i];
        }
      }
      if (this.carousel.id === 0) {
        this.saveCarouselItem(this.carousel);
        this.$router.push("/carousel");
      }
      // Else update
    }
  }
};
</script>
