<template lang="html">
  <div>
    <table class="c-spreadsheet-preview">
      <thead>
        <tr>
          <th v-for="(cell, cellIndex) in collapsedHeaderRow"
            :key="`cell-${cellIndex}`"
            class="c-spreadsheet-preview__cell c-spreadsheet-preview__cell--header"
            :class="[{
              'c-spreadsheet-preview__ellipsis--cell': needsHorizontalExpansion && (cellIndex - 1) === columnEllipsisIndex}]">
            {{cell}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in collapsedDataRows"
          :key="`row-${index}`">
          <td  v-for="(cell, cellIndex) in row"
            :key="`cell-${cellIndex}`"
            :title="cell"
            class="c-spreadsheet-preview__cell"
            :class="[{
              'c-spreadsheet-preview__second-header': index === 0,
              'u-text--bold': cellIndex === (collapsedDataRows[0].length - 1),
              'c-spreadsheet-preview__ellipsis--cell': needsHorizontalExpansion && (cellIndex - 1) === columnEllipsisIndex,
              'c-spreadsheet-preview__ellipsis--row': needsVerticalExpansion && (index) === rowEllipsisIndex}]">
            {{ cell }}
          </td>
        </tr>
      </tbody>
    </table>
    <div class="u-pt2">
      <el-button v-if="collapsedDataRows && needsExpansion"
        size="small"
        class="u-link"
        @mousedown.native.prevent="emitExpandTable">
        Expand Table
        <fa-icon
          class="fa-fw u-ml1"
          icon="expand-wide"/>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElSpreadsheetPreview',
  props: {
    tableRows: {
      type: Array,
      required: true
    },
    maxAllowedColumns: {
      type: Number,
      default: 5,
      validator: value => value >= 0
    },
    columnEllipsisIndex: {
      type: Number,
      default: 3,
      validator: value => value >= 0
    },
    maxAllowedRows: {
      type: Number,
      default: 6,
      validator: value => value >= 0
    },
    rowEllipsisIndex: {
      type: Number,
      default: 4,
      validator: value => value >= 0
    }
  },
  computed: {
    totalRows() {
      return this.tableRows.length;
    },
    totalColumns() {
      return this.firstRow.length;
    },
    needsVerticalExpansion() {
      return this.totalRows > this.maxAllowedRows;
    },
    needsHorizontalExpansion() {
      return this.totalColumns > this.maxAllowedColumns;
    },
    needsExpansion() {
      return this.needsVerticalExpansion || this.needsHorizontalExpansion;
    },
    firstRow() {
      return this.tableRows[0] || [];
    },
    ellipsisRow() {
      const count = this.totalColumns < this.maxAllowedColumns ? this.totalColumns : this.maxAllowedColumns;
      let collapsedRow = new Array(count);
      collapsedRow.fill('', 0, this.maxAllowedColumns);
      collapsedRow[0] = '...';
      return collapsedRow;
    },
    collapsedHeaderRow() {
      let collapsedRow = [];
      collapsedRow.push('');
      for (const index of this.firstRow.keys()) {
        if (this.shouldShowCellValue(index)) {
          collapsedRow.push(String.fromCharCode(index + 65));
        } else if (index === this.columnEllipsisIndex) {
          collapsedRow.push('...');
        }
      }
      return collapsedRow;
    },
    collapsedDataRows() {
      let collapsedTable = [];

      for (let [index, row] of this.tableRows.entries()) {
        let collapsedRow = [index + 1];
        if (this.shouldShowRow(index)) {
          for (let [cellIndex, cell] of row.entries()) {
            if (this.shouldShowCellValue(cellIndex)) {
              collapsedRow.push(cell);
            } else if (cellIndex === this.columnEllipsisIndex) {
              collapsedRow.push('');
            }
          }
          collapsedTable.push(collapsedRow);
        } else if (index === this.rowEllipsisIndex) {
          // Add empty row having ellipsis
          collapsedTable.push(this.ellipsisRow);
        }
      }
      return collapsedTable;
    }
  },
  methods: {
    isLastCell(index) {
      return index === (this.totalColumns - 1);
    },
    isLastRow(index) {
      return index === (this.totalRows - 1);
    },
    shouldShowCellValue(index) {
      return !this.needsHorizontalExpansion || (this.needsHorizontalExpansion && index < this.columnEllipsisIndex) || this.isLastCell(index);
    },
    shouldShowRow(index) {
      return !this.needsVerticalExpansion || (this.needsVerticalExpansion && index < this.rowEllipsisIndex) || this.isLastRow(index);
    },
    emitExpandTable() {
      this.$emit('expand-table');
    }
  }
};
</script>
