<template>
  <!-- eslint-disable max-len -->
  <main id="main" style="margin-top:-30px;padding-bottom:50px">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header" style="">
            <h2>My Timeshare Weeks</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-auto">
          <table class="table table-striped table-responsive" style="max-width:1920px">
            <thead>
              <tr>
                <th scope="col" v-for="(col, c) in displayColumns" :key="c">
                  <div @click="sortBy(columns[c])" style="cursor: pointer">
                    <div class="d-flex bd-highlight">
                      <div class="w-100 bd-highlight">{{ col }}</div>
                      <div class="flex-shrink-1 bd-highlight">
                        <img
                          src="../../../public/img/sort-up.png"
                          height="8px;"
                          v-if="sortKey === columns[c] && reverse"
                        />
                        <img
                          src="../../../public/img/sort-down.png"
                          height="8px;"
                          v-if="sortKey === columns[c] && !reverse"
                        />
                      </div>
                    </div>
                  </div>
                </th>
                <!-- <th scope="col">Property</th>
                <th scope="col">Unit</th>
                <th scope="col">Size</th>
                <th scope="col">Price Ex VAT</th>
                <th scope="col">Region</th>
                <th scope="col">Town</th>
                <th scope="col">Suburb</th>
                <th scope="col">Status</th>
                <th scope="col">Type</th>-->
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(item, i) in DisplayItems" :key="i">
                <td>#{{ item.id }}</td>
                <td>{{ item.owner }}</td>
                <td>{{ item.agent }}</td>
                <td>{{ item.resort.resortName }}</td>
                <td>{{ item.module }}</td>
                <td>{{ item.unitNumber }}</td>
                <td>{{ item.bedrooms }}</td>
                <td>{{ item.season }}</td>
                <td>{{ item.region.regionName }}</td>
                <td>{{ item.sellPrice | toCurrency }}</td>
                <td>{{ item.pulbishedDate | toDate }}</td>
                <td>{{ item.status.description }}</td>
                <!-- <td v-if="!item.publish">
                  <a v-on:click="Publish(item)">
                    <img src="../../../public/img/icons/Upload.png" height="25" width="25" />
                  </a>
                </td>
                <td v-else>
                  <a v-on:click="Unpublish(item)">
                    <img src="../../../public/img/icons/Download-grey.png" height="25" width="25" />
                  </a>
                </td> -->
                <td>
                  <a v-on:click="Edit(item)">
                    <img src="../../../public/img/icons/Edit.png" height="25" width="25" />
                  </a>
                </td>
                <td>
                  <a v-on:click="Delete(item)">
                    <img src="../../../public/img/icons/delete.png" height="25" width="25" />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="d-flex justify-content-between" v-if="showPager">
            <div class="p-1">
              {{ currentPage + " / " + PageCount + (" - (" + FilteredListings.length + " items)") }}
            </div>
            <div class="p-1">
              <BasePagination
                :currentPage="currentPage"
                :pageCount="PageCount"
                @nextPage="pageChangeHandle('next')"
                @previousPage="pageChangeHandle('previous')"
                @loadPage="pageChangeHandle"
              />
            </div>
            <div class="p-2">
              <div class="d-flex flex-row">
                <div>
                  <select
                    class="form-control uniSelect"
                    v-model="visibleItemsPerPageCount"
                    @change="onChangeItemsPerPage()"
                  >
                    <option v-for="(item, i) in itemsPerPageList" :key="i">
                      {{ item }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="p-2">
            <div class="d-flex flex-row">
              <div>
                <button v-if="sortKey !== 'id'" class="btn-solid-blue" @click="ClearSort">
                  Clear Sort
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="wait" id="preloader"></div>
    </div>

    <!-- <div class="row">
      <div class="offset-1 col-md-3">
        {{ items[selectedItems] }}
        <button
          type="button"
          :class="{
            'form-control btn-solid-blue ': 1 === 1,
            'my-disable':
              !(selectedItems.length == 1) ||
              !items[selectedItems] ||
              items[selectedItems].status.code !== 'A2'
          }"
          value="Publish Week"
          :disabled="!(items.length == 1)"
        >
          Publish selected week
        </button>
      </div>
      <div class="offset-1 col-md-10">
        <ListView
          :items="items"
          @onNew="onNew"
          @onRowClick="onRowClick"
          @onClearSelected="onClearSelected"
        />
      </div>
    </div> -->
  </main>
</template>
<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
import Log from "../../assets/Log";
import ListView from "../shared/listView.vue";
import BasePagination from "../shared/basePagination";
import ItemsPerPageList from "../../assets/staticData/itemsPerPageFive";
import _ from "lodash";

export default {
  components: {
    ListView,
    BasePagination
  },
  data() {
    return {
      filter: undefined,
      wait: true,
      showPager: true,
      visibleItemsPerPageCount: 10,
      itemsPerPageList: ItemsPerPageList,
      reverse: true,
      currentPage: 1,
      sortKey: "id",
      displayColumns: [
        "Ref",
        "Owner",
        "Agent",
        "Resort",
        "Week Module",
        "Unit",
        "Beds",
        "Season",
        "Region",
        "Amount",
        "Submitted",
        "Status"
      ],
      columns: [
        "id",
        "owner",
        "agent",
        "resort",
        "module",
        "unitNumber",
        "bedrooms",
        "season",
        "region",
        "sellPrice",
        "weekStatus"
      ]
    };
  },
  created() {
    this.getItems(Log.getUser().id).then(() => {
      this.wait = false;
    });
  },
  mounted() {},
  computed: {
    ...mapGetters({ getNeedsVerify: "myWeeks/getNeedsVerify" }),
    ...mapState("myWeeks", ["items"]),
    FilteredListings() {
      if (this.filter) {
        const list = _.filter(this.getNeedsVerify, item =>
          Object.values(item).some(
            i =>
              JSON.stringify(i)
                .toLowerCase()
                .indexOf(this.filter.toLowerCase()) > -1
          )
        );
        return _.orderBy(list, this.sortKey, this.SortDirection);
      } else {
        return _.orderBy(this.getNeedsVerify, this.sortKey, this.SortDirection);
      }
    },
    PageCount() {
      return this.visibleItemsPerPageCount !== 0
        ? Math.ceil(this.items.length / this.visibleItemsPerPageCount)
        : 1;
    },
    DisplayItems() {
      const list = this.FilteredListings;
      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
      if (endSlice > list.length) {
        endSlice = list.length;
      }
      return list.slice(startSlice, endSlice);
    },
    SortDirection() {
      return this.reverse ? "desc" : "asc";
    }
  },
  methods: {
    ...mapActions("myWeeks", ["getItems"]),
    onEdit(item) {
      this.$router.push(`/timeshare/${item.id}`);
    },
    onNew() {
      this.$router.push("/timeshare/sell");
    },
    onRowClick(items) {
      this.selectedItems = items;
    },
    onClearSelected() {
      this.selectedItems = [];
    },
    Edit(item) {
      this.$router.push({ name: "EditTimeshare", params: { weekParam: item } });
      // this.$router.push(`/editTimeShare/${item.id}`);
    },
    Delete(item) {
      this.deleteListing(item.id);
    },
    async pageChangeHandle(value) {
      switch (value) {
        case "next":
          this.currentPage += 1;
          break;
        case "previous":
          this.currentPage -= 1;
          break;
        default:
          this.currentPage = value;
      }
    },
    sortBy(sortKey) {
      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
      this.sortKey = sortKey;
    },
    ClearSort() {
      this.reverse = true;
      this.sortKey = "id";
    }
  }
};
</script>
<style scoped>
.my-disable {
  background-color: silver;
  border-color: silver;
}
.my-disable:hover {
  background-color: lightgray;
  border-color: lightgray;
}
</style>
