/* eslint-disable no-restricted-syntax */ /* eslint-disable guard-for-in */
<!-- eslint-disable max-len -->
<template>
  <main id="main" style="margin-top:200px; padding-bottom:50px">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>All Timeshare Weeks</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <float-label label="REGION">
            <select
              id="weekInfoRegionSelect"
              class="form-control uniSelect"
              @change="regionChange()"
              style="font-size: 15px"
            >
              <option v-for="(region, r) in regions" :key="r" :value="region">{{
                region.regionName
              }}</option>
            </select>
          </float-label>
        </div>
        <div class="col-md-3">
          <float-label label="RESORT NAME">
            <select
              id="weekInfoResortSelect"
              class="form-control uniSelect"
              @change="resortChange()"
            >
              <option value="Other">Other</option>
              <option v-for="(resort, r) in resorts" :key="r" :value="resort">{{
                resort.resortName
              }}</option>
            </select>
          </float-label>
        </div>
        <div class="col-md-3">
          <float-label label="SEASON">
            <select class="form-control uniSelect" name="region" id="region">
              <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
            </select>
          </float-label>
        </div>
        <div class="col-md-3">
          <float-label label="STATUS">
            <select class="form-control uniSelect" name="status"> </select>
          </float-label>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button style="float:right" class="btn-solid-blue" type="button">Filter</button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <ListView
            :items="getNeedsVerify"
            :editable="true"
            :deleteable="true"
            :showCustomAction="true"
            :CustomActionHeading="'Publish'"
            @onRowClick="onRowClick"
            @onClearSelected="onClearSelected"
            @onEdit="onEdit"
            :showNew="false"
          />
        </div>
      </div>
      <!-- <div class="offset-1 col-md-6">
        <button
          type="button"
          :class="{
            'form-control btn btn-primary ': 1 === 1,
            'my-disable': !selectedItems || selectedItems.length === 0
          }"
          value="Verify Week(s)"
          :disabled="!(selectedItems.length > 0)"
          @click="onVerify()"
        >
          {{ ButtonMessage }}
        </button> 
        <div>{{ Message }}</div>
      </div> -->
    </div>
  </main>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
import Log from "../../../assets/Log";
import ListView from "../../shared/listView.vue";

export default {
  name: "TimeshareAdmin",
  components: {
    ListView
  },
  data() {
    return {
      user: Log.getUser(),
      selectedItems: [],
      showMessage: false
    };
  },
  mounted() {
    this.getItems(this.user.id);
    this.initTimeshare(0);
  },
  computed: {
    ...mapState("timeshare", ["resorts", "regions", "seasons"]),
    ...mapState("individual", ["indiv"]),
    filteredResort() {
      let list = [];
      if (this.sellItem && this.sellItem.region && this.sellItem.region.regionCode) {
        const item = this.detailedRegion.find(
          region => region.region.regionCode === this.sellItem.region.regionCode
        );
        if (item) {
          list = item.children;
        }
      } else {
        list = this.resorts;
      }
      return _.sortBy(list, x => x.resortName);
    },
    SelectedItems() {
      const selectedArray = [];
      this.selectedItems.forEach(x => selectedArray.push(this.items[x]));
      return selectedArray;
    },
    ButtonMessage() {
      let msg = "";
      if (!(this.selectedItems.length > 0)) {
        msg = "No Items selected";
      } else {
        msg = "Verify item";
        if (this.selectedItems.length > 1) {
          msg += "s";
        }
      }
      return msg;
    },
    Message() {
      let msg = "";
      if (!(this.selectedItems.length > 0)) {
        msg = "Please select the item(s) to verify.";
      } else {
        msg = `${this.selectedItems.length}`;
        if (this.selectedItems.length === 1) {
          msg += " item ";
        } else msg += " items ";
        msg += "selected. Click to verify or select more...";
      }
      return msg;
    },
    ...mapState("myWeeks", ["items"]),
    ...mapGetters({ getNeedsVerify: "myWeeks/getNeedsVerify" })
  },
  methods: {
    ...mapActions("myWeeks", ["getItems", "verifyWeek"]),
    ...mapActions("alert", ["success"]),
    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek", "getBlankWeek"]),
    onVerify() {
      if (this.selectedItems.length > 0) {
        for (const i in this.selectedItems) {
          const selectedIndex = this.selectedItems[i];
          const item = this.items[selectedIndex];
          if (item) {
            this.verifyWeek(item.id);
          }
        }
        this.success("Week verified!");
        this.$router.push("/shared/alert");
      }
    },
    onRowClick(items) {
      this.selectedItems = items;
    },
    onEdit(item) {
      this.$router.push(`/editTimeShare/${item.id}`);
    },
    onClearSelected() {
      this.selectedItems = [];
    }
    //   onDelete(item) {
    //   this.deleteListing(item.id);
    // },
  }
};
</script>

<style>
.my-disable {
  background-color: silver;
  border-color: silver;
}
.my-disable:hover {
  background-color: lightgray;
  border-color: lightgray;
}
</style>