<template>
  <div>
    <div v-if="loaded">
      <div class="row">
        <div class="col-md-12" v-if="message !== undefined">
          <Alert :text="message" :type="'ERROR'" />
        </div>
      </div>
      <div class="container col-md-12" style="text-align:left">
        <div class="form-group row">
          <div class="col-md-3">
            <button type="button" class="btn-solid-blue" @click="SearchWeeks()">
              FIND PROPERTY
            </button>
            <modal name="propSearch" :width="700" :height="900">
              <Search :selectProperty="PropertyType" @onSelected="onSelected" />
            </modal>
          </div>
          <div class="col-md-2 mt-3">
            <input class="form-control" type="label" disabled :value="propertyObj.reference" />
          </div>
          <div class="col-md-2">
            <label>Upload Image?</label>
            <div class="custom-control custom-switch">
              <input
                type="checkbox"
                class="custom-control-input"
                id="customSwitch1"
                :checked="uploadImage"
                @change="checkImage"
              />
              <label class="custom-control-label" for="customSwitch1">{{
                uploadImage ? "Yes" : "No"
              }}</label>
            </div>
          </div>
          <div class="col-md-3">
            <Images v-if="uploadImage" :allowMultiple="false" :loadedImages="LoadedImages" />
            <input
              v-else
              class="form-control"
              type="text"
              placeholder="image url"
              v-model="propertyObj.imageUrl"
            />
          </div>
          <div class="col-md-2">
            <label>Custom Place holders</label>
            <div class="custom-control custom-switch">
              <input
                type="checkbox"
                class="custom-control-input"
                id="customSwitch2"
                :checked="showPlaceholder"
                @change="ShowFields"
              />
              <label class="custom-control-label" for="customSwitch2">{{
                showPlaceholder ? "Yes" : "No"
              }}</label>
            </div>
          </div>
        </div>
        <hr v-if="showPlaceholder" />
        <!-- <div class="form-group row">
        <div class="col-md-5">
          <button
            type="button"
            @click="ShowFields()"
            class="btn btn-primary myBackground"
          >Add Custom Place Holders</button>
        </div>
      </div>-->
        <div class="form-group row">
          <div class="col-md-12" v-if="messageCPH !== undefined">
            <Alert :text="messageCPH" :type="'ERROR'" />
          </div>
        </div>
        <div class="form-group row" v-if="showPlaceholder">
          <div class="col-md-2">
            <label>Place Holder</label>
          </div>
          <div class="col-md-3">
            <input class="form-control" type="text" v-model="placeHolder" />
          </div>
          <div class="col-md-2">
            <label>Value</label>
          </div>
          <div class="col-md-3">
            <input class="form-control" type="text" v-model="value" />
          </div>
          <div class="col-md-2">
            <button type="button" @click="AddCustomHolder()" class="btn-solid-blue">
              Add
            </button>
          </div>
        </div>
        <div class="form-group row" v-if="showPlaceholder">
          <div class="col-md-12">
            <ListView
              :items="placeHolders"
              :hideSearch="true"
              :showColumnChooser="false"
              :showNew="false"
              :allowMultipleSelect="false"
              :canEdit="false"
              :deleteable="true"
              @onDelete="onItemDelete"
            />
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-1 offset-md-11">
            <button type="button" @click="SaveData()" class="btn-solid-blue">
              Add
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Search from "../admin/misc/carouselSearchProperty.vue";
import Images from "../property/propertyImage.vue";
import { mapState, mapActions } from "vuex";
import Alert from "../shared/alert.vue";
import ListView from "../shared/listView.vue";

export default {
  name: "LandingPageWeek",
  components: {
    Search,
    Images,
    Alert,
    ListView
  },
  props: {
    PropertyType: {}
  },
  data() {
    return {
      loaded: false,
      uploadImage: false,
      message: undefined,
      messageCPH: undefined,
      weekUni: "",
      propertyObj: {},
      placeHolders: [],
      showPlaceholder: false,
      placeHolder: undefined,
      value: undefined,
      selectedProperty: ""
    };
  },
  methods: {
    ...mapActions("campaignItem", ["getCampaignItem"]),
    SearchWeeks() {
      this.$modal.show("propSearch");
    },
    onSelected(item) {
      this.propertyObj = item;
      this.$modal.hide("propSearch");
    },
    checkImage(item) {
      this.uploadImage = !this.uploadImage;
    },
    ShowFields() {
      this.showPlaceholder = !this.showPlaceholder;
    },
    SaveData() {
      this.message = undefined;
      let msg = "";
      if (!this.propertyObj) {
        msg += "Please select a week. ";
      }
      if (this.propertyObj.image === undefined && this.propertyObj.imageUrl === undefined) {
        msg += "Please select an image for this week. ";
      }
      if (msg.length > 0) {
        this.message = msg;
      } else {
        if (this.uploadImage) {
          this.campaignItem.image = this.propertyObj.image[0];
        } else {
          this.campaignItem.image = this.propertyObj.imageUrl;
        }
        this.campaignItem.property = this.propertyObj;
        this.campaignItem.propertyId = this.propertyObj.id;

        if (this.placeHolders.length > 0) {
          this.campaignItem.placeHolders = this.placeHolders;
          this.placeHolders = [];
        }
        this.$emit("onWeekItemAdd", this.campaignItem);
        this.campaignItem.placeHolders = [];
      }
    },
    LoadedImages(values) {
      this.propertyObj.image = values;
    },
    AddCustomHolder() {
      this.messageCPH = undefined;
      let msg = "";

      if (this.placeHolder === undefined) {
        msg += "Please enter a Place Holder name. ";
      }
      if (this.value === undefined) {
        msg += "Please enter a Value. ";
      }

      if (msg.length > 0) {
        this.messageCPH = msg;
      } else {
        this.placeHolders.push({
          placeHolder: this.placeHolder,
          value: this.value
        });
        this.placeHolder = undefined;
        this.value = undefined;
      }
    },
    onItemDelete(item) {
      this.placeHolders = _.remove(this.placeHolders, x => x !== item);
    },
    async loadData() {
      if (this.$route.params.id) {
        await this.getCampaignItem(this.$route.params.id);
      }
    }
  },
  mounted() {
    this.loadData().then(() => {
      setTimeout(() => {
        this.loaded = true;
      }, 100);
    });
  },
  computed: {
    ...mapState("campaignItem", ["campaignItem"])
  }
};
</script>
