<template>
  <!-- eslint-disable max-len -->
  <div v-if="property">
    <div class="container">
      <br />
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <div class="title-box-d">
            <h1 class="title-d" style="text-align: left; font-size: 250%;">
              {{ property.shortDescription }}
            </h1>
          </div>
        </div>
      </div>
    </div>
    <!--/ Intro Single End /-->

    <!--/ property Single Star /-->
    <section class="property-single nav-arrow-b">
      <div class="container">
        <div class="row">
          <div id="app" class="scrolling-wrapper">
            <div class="card">
              <img
                class="image"
                v-for="(image, i) in propertyImages"
                :src="image"
                @click="index = i"
                :key="i"
              />
            </div>
            <gallery
              :images="propertyImages"
              :index="index"
              @close="index = null"
            ></gallery>
          </div>
        </div>
        <br />
        <div class="row">
          <div class="col-sm-12">
            <div class="row justify-content-between">
              <div class="col-md-7 col-lg-7 section-md-t3">
                <div class="row">
                  <div class="col-sm-12">
                    <div class="title-box-d">
                      <h3 class="title-d" style="text-align: left;">
                        Property Description
                      </h3>
                    </div>
                  </div>
                </div>
                <div
                  class="property-description"
                  style="text-align: left;"
                  v-html="property.description"
                />
                <div v-for="display in property.displayData" :key="display.id">
                  <div class="row section-t3" style="text-align: left;">
                    <div class="col-sm-12">
                      <div class="title-box-d">
                        <h3 class="title-d">{{ display.groupName }}</h3>
                      </div>
                    </div>
                  </div>
                  <div class="summary-list">
                    <ul
                      class="list"
                      v-for="item in display.values"
                      :key="item.id"
                    >
                      <li class="d-flex justify-content-between">
                        <strong>{{ item.name }}:</strong>
                        <span v-html="item.value"></span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-md-5 col-lg-4">
                <div class="property-price d-flex justify-content-center foo">
                  <!-- <div class="card-header-c d-flex"> -->
                  <div
                    style="
                      width: 300px;
                      height: 80px;
                      border-style: solid;
                      color: #60cbeb;
                    "
                  >
                    <!-- <span class="ion-money">R</span> -->

                    <div class="card-title-c align-self-center">
                      <h5 class="title-c">
                        R{{ formatPrice(property.price) }}
                      </h5>
                      <h6 v-if="property.pricePer">
                        Per {{ property.pricePer }}
                      </h6>
                    </div>
                  </div>
                  <!-- </div> -->
                </div>
                <div class="property-summary">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="title-box-d section-t4">
                        <h3 class="title-d" style="text-align: left;">
                          Summary
                        </h3>
                      </div>
                    </div>
                  </div>
                  <div class="summary-list">
                    <ul class="list">
                      <li
                        v-if="!property.isSale"
                        class="d-flex justify-content-between"
                      >
                        <strong>Available:</strong>
                        <span v-if="property.dateAvailable < date">
                          {{ property.dateAvailable | toDate }}
                        </span>
                        <span v-else>Now</span>
                      </li>
                      <li class="d-flex justify-content-between">
                        <strong>Property ID:</strong>
                        <span>{{ property.id }}</span>
                      </li>
                      <!-- Should not be visible? -->
                      <!-- <li class="d-flex justify-content-between">
                        <strong>Status:</strong>
                        <span
                          v-if="property.status"
                        >{{ property.status.code }} - {{ property.status.description }}</span>
                      </li>-->
                      <li class="d-flex justify-content-between">
                        <strong>Address:</strong>
                        <span
                          style="text-align: right;"
                          v-if="property"
                          v-html="
                            formatAddress(property.addressLine1) +
                            formatAddress(property.addressLine2) +
                            formatAddress(property.addressLine3) +
                            formatAddress(
                              property.suburb
                                ? property.suburb.description
                                : '',
                            ) +
                            formatAddress(
                              property.city ? property.city.description : '',
                            ) +
                            formatAddress(
                              property.province
                                ? property.province.description
                                : '',
                            )
                          "
                        ></span>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="col-md-12" v-if="mayEdit">
                  <button
                    type="button"
                    class="btn btn-b-n"
                    data-toggle="modal"
                    data-target="#myModal"
                  >
                    Make an Offer
                  </button>
                  <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-lg">
                      <!-- Modal content-->
                      <div class="modal-content">
                        <div class="modal-header">
                          <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                          >
                            &times;
                          </button>
                        </div>
                        <div padding-left="20px">
                          <makeOffer
                            name="MakeOffer"
                            :isMakeOffer="true"
                            :isProperty="true"
                            :item="{
                              id: property.id,
                              shortDescription: property.shortDescription,
                              description: property.description,
                              price: property.price,
                            }"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="col-md-12"
                  v-if="!mayEdit"
                  style="background-color: #ff8344; color: white;"
                >
                  <p>
                    <b>Offer Pending</b>
                  </p>
                </div>
                <div class="col-md-12">
                  <div class="row section-t3">
                    <div class="col-sm-12">
                      <div class="title-box-d">
                        <h3 class="title-d" style="text-align: left;">
                          Contact Agent
                        </h3>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <div class="property-contact">
                        <form class="form-a">
                          <div class="row">
                            <div class="col-md-12 mb-1">
                              <div class="form-group">
                                <input
                                  type="text"
                                  class="form-control form-control-lg form-control-a"
                                  id="inputName"
                                  placeholder="Name *"
                                  required
                                />
                              </div>
                            </div>
                            <div class="col-md-12 mb-1">
                              <div class="form-group">
                                <input
                                  type="email"
                                  class="form-control form-control-lg form-control-a"
                                  id="inputEmail1"
                                  placeholder="Email *"
                                  required
                                />
                              </div>
                            </div>
                            <div class="col-md-12 mb-1">
                              <div class="form-group">
                                <textarea
                                  id="textMessage"
                                  class="form-control"
                                  placeholder="Comment *"
                                  name="message"
                                  cols="45"
                                  rows="8"
                                  required
                                ></textarea>
                              </div>
                            </div>
                            <div class="col-md-12">
                              <button type="submit" class="btn btn-b-n">
                                Send Message
                              </button>
                            </div>
                          </div>
                        </form>
                        <br />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Tab Control -->
        <div class="row">
          <div class="col-md-12">
            <div
              v-if="property.virtualTour"
              class="row justify-content-between"
            >
              <div class="col-md-12 col-lg-12 section-md-t3">
                <div class="row">
                  <div class="col-md-12">
                    <div class="title-box-d">
                      <h3 class="title-d" style="text-align: left;">
                        Virtual Tour
                      </h3>
                    </div>
                  </div>
                </div>
                <iframe
                  :src="property.virtualTour"
                  width="100%"
                  height="700"
                  frameborder="0"
                  webkitallowfullscreen
                  mozallowfullscreen
                  allowfullscreen
                ></iframe>
              </div>
            </div>
            <div class="row">
              <br />
            </div>
            <div v-if="property.video" class="row justify-content-between">
              <div class="col-md-12 col-lg-12 section-md-t3">
                <div class="row">
                  <div class="col-md-12">
                    <div class="title-box-d">
                      <h3 class="title-d" style="text-align: left;">Video</h3>
                    </div>
                  </div>
                </div>
                <iframe
                  :src="`https://www.youtube.com/embed/${property.video}`"
                  width="100%"
                  height="700"
                  frameborder="0"
                  style="border: 0;"
                  allowfullscreen
                ></iframe>
              </div>
            </div>
          </div>
          <!-- End Tab Control -->
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import makeOffer from '../processFlow/makeOffer.vue'
import gallery from '../shared/gallerySlideShow.vue'

export default {
  name: 'property',
  components: {
    makeOffer,
    gallery,
  },
  data() {
    return {
      index: null,
      date: new Date(),
    }
  },
  mounted() {
    this.getProperty(this.$route.params.id)
    this.getPropertyImages(this.$route.params.id)
    this.mayEditProperty(this.$route.params.id)
  },
  computed: {
    ...mapState('property', ['property', 'propertyImages']),
    ...mapState('propertyEdit', ['mayEdit']),
  },
  methods: {
    ...mapActions('property', [
      'getProperty',
      'getPropertyImages',
      'clearPropertyImages',
    ]),
    ...mapActions('propertyEdit', ['mayEditProperty']),
    formatPrice(value) {
      const val = (value / 1).toFixed(2)
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
    },
    formatAddress(value) {
      if (value !== '') {
        return `${value}<br/>`
      }
      return ''
    },
  },
  beforeDestroy() {
    this.clearPropertyImages()
  },
}
</script>

<style lang="scss">
.image {
  width: 150px;
  height: 150px;
  background-size: cover;
  cursor: pointer;
  margin: 5px;
  border-radius: 3px;
  border: 1px solid lightgray;
  object-fit: contain;
}
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card {
    display: inline-block;
  }
}
</style>
