const table_content_proto = document.getElementById('ld-snps-primitive').innerText.trim().split('\n');
const snp_position = Number(document.getElementById('snp-position-primitive').innerText.trim());

const table_content = Array(table_content_proto.length);
for (var jth = 0; jth < table_content.length; jth++) {
    table_content[jth] = {snp_id: table_content_proto[jth].split(',')[0],
                          r2: table_content_proto[jth].split(',')[1],
                          distance: (snp_position - Number(table_content_proto[jth].split(',')[2])),
                          };
};

function sortTableByHeader (data, toSort, sortOrder) {
    let sortedProducts = [...data];
      if ( toSort != 'snp_id' ) {
        sortedProducts.sort((a, b) => {
          if ( Number(a[toSort]) < Number(b[toSort]) ) {
            return sortOrder === 'ascending' ? -1 : 1 ;
          }
          if ( Number(a[toSort]) > Number(b[toSort])) {
            return sortOrder === 'ascending' ? 1 : -1;
          }
          return 0;
        });
      } else {
        sortedProducts.sort((a, b) => {
          if (a[toSort] < b[toSort]) {
            return sortOrder === 'ascending' ? -1 : 1 ;
          }
          if (a[toSort] > b[toSort]) {
            return sortOrder === 'ascending' ? 1 : -1 ;
          }
          return 0;
        });
      }
    return sortedProducts;
    };


class PaginationNavigator extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            todos: table_content,
            currentPage: 1,
            todosPerPage: 10,
            sortBy: '',
            sortOrder: 'ascending',
            pageShowMax: 10
            };
        this.handlePagination = this.handlePagination.bind(this);
        this.requestSort = this.requestSort.bind(this);
    }

    handlePagination(event) {
        this.setState(
            {currentPage: Number(event.target.id)}
        );
    }

    requestSort(event) {
       if (this.state.sortOrder == 'ascending') {
              this.setState(
            {sortBy: String(event.target.id),
             sortOrder: 'descending',
             todos: sortTableByHeader(table_content, String(event.target.id), 'ascending')
            }
        );
       } else {
              this.setState(
            {sortBy: String(event.target.id),
             sortOrder: 'ascending',
             todos: sortTableByHeader(table_content, String(event.target.id), 'descending')
            }
        );
       }
    }

    render() {
        const { todos, currentPage, todosPerPage, sortBy , sortOrder} = this.state;
        const indexOfLastTodo = currentPage * todosPerPage;
        const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
        const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

        const renderTodos = currentTodos.map((todo, index) => {
        return(
            <tr key={index} className='ld-distance-table-row'>
                <td className='ld-distance-table-item'>
                    <a href={'http://bidas.kaist.ac.kr/snep/entity/snp/' + todo.snp_id}>{todo.snp_id}</a>
                </td>
                <td className='ld-distance-table-item'>{todo.r2}</td>
                <td className='ld-distance-table-item'>{todo.distance}</td>
            </tr>
            );
        });

        const pageNumbers = [];
        for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
          pageNumbers.push(i);
        }

        let pageNumbersToShow = Array()
        if (Number(currentPage) == 1) {
                pageNumbersToShow = pageNumbers.slice(currentPage-1, currentPage+4)
        } else {
                pageNumbersToShow = pageNumbers.slice(currentPage-2, currentPage+3)
        }

        const renderPageNumbers = pageNumbersToShow.map(number => {
          return (
            <ReactBootstrap.Pagination.Item
              key={number}
              id={number}
              onClick={this.handlePagination}>
              {number}
              </ReactBootstrap.Pagination.Item>
          );
        });

        const renderPaginationNavigator = (
        <ReactBootstrap.Pagination>
            <ReactBootstrap.Pagination.Item
            id={pageNumbers[0]}
            onClick={this.handlePagination}
            >&laquo; First
            </ReactBootstrap.Pagination.Item>
            {renderPageNumbers}
            <ReactBootstrap.Pagination.Item
            onClick={this.handlePagination}
            id={pageNumbers.slice(-1)[0]}
            >Last &raquo;
            </ReactBootstrap.Pagination.Item>
        </ReactBootstrap.Pagination>
        )

        const renderCurrentViewScope = (
            <div>
                <p>Showing {indexOfFirstTodo + 1}-{(indexOfLastTodo > todos.length) ? todos.length : indexOfLastTodo} of {todos.length}</p>
            </div>
        )

        let sortOrderIndicator = {
            snp_id: '',
            r2:'',
            distance: '',
        };

        if (sortBy == 'snp_id' && sortOrder == 'ascending') {
            sortOrderIndicator.snp_id = ' \u25BC'
        } else if (sortBy == 'snp_id' && sortOrder == 'descending') {
            sortOrderIndicator.snp_id = ' \u25B2'
        } else if (sortBy == 'r2' && sortOrder == 'ascending') {
            sortOrderIndicator.r2 = ' \u25BC'
        } else if (sortBy == 'r2' && sortOrder == 'descending') {
            sortOrderIndicator.r2 = ' \u25B2'
        } else if (sortBy == 'distance' && sortOrder == 'ascending') {
            sortOrderIndicator.distance = ' \u25BC'
        } else if (sortBy == 'distance' && sortOrder == 'descending') {
            sortOrderIndicator.distance = ' \u25B2'
        }

        const renderSortButton = (
            <div id='association-table-header-downloader' className='d-flex flex-row justify-content-between'>
                <ReactBootstrap.Button variant='outline-dark' size='sm' id='snp_id'
                onClick={this.requestSort} className='ld-table-sort-button'>
                Sort by SNP ID {sortOrderIndicator.snp_id}
                </ReactBootstrap.Button>
                <ReactBootstrap.Button variant='outline-dark' size='sm' id='r2'
                onClick={this.requestSort} className='ld-table-sort-button'>
                Sort by LD R<sup>2</sup> {sortOrderIndicator.r2}
                </ReactBootstrap.Button>
                <ReactBootstrap.Button variant='outline-dark' size='sm' id='distance'
                onClick={this.requestSort} className='ld-table-sort-button'>
                Sort by distance {sortOrderIndicator.distance}
                </ReactBootstrap.Button>
            </div>
        );

        return (
            <ReactBootstrap.Container fluid>
                <div id='association-table-header' className='d-flex flex-row justify-content-between'>
                    <div id='association-table-header-descriptor'>
                        <p>
                        There are {table_content.length-1} high LD proxy SNPs with this index SNP.
                        </p>
                    </div>
                    {renderSortButton}
                </div>
                <ReactBootstrap.Row className='justify-content-center'>
                    <ReactBootstrap.Table striped bordered id='association-table-body' >
                        <tbody>
                            {renderTodos}
                        </tbody>
                    </ReactBootstrap.Table>
                </ReactBootstrap.Row>
                <div id='association-table-footer' className='d-flex flex-row justify-content-between'>
                    <div id='association-table-footer-scope'>
                        {renderCurrentViewScope}
                    </div>
                    <div id='association-table-footer-paginator'>
                        {renderPaginationNavigator}
                    </div>
                </div>
            </ReactBootstrap.Container>
        );
    }
}

ReactDOM.render(<PaginationNavigator />, document.getElementById('ld-snps-content'));