import React from 'react'

import { connect } from 'react-redux'

import { Limit, Offset } from '../api'

import Value from '../pipeline/Value'

import { setPage } from './actions/Search'


const pageNumbers = (page, totalPages) => {
  const pages = []

  let i = 2
  while (i >= 0) {
    if (page - i > 0) {
      pages.push(page-i)
    }
    i--
  }

  i = 1
  while (pages.length < 5 && page + i <= totalPages) {
    pages.push(page+i)
    i++
  }

  i = 3
  while (pages.length < 5 && page - i > 0) {
    pages.unshift(page-i)
    i++
  }
  return pages
}

const Paginator = ({ resultsPerPage, page, totalResults, setPage }) => {
  if (totalResults <= resultsPerPage) {
    return null
  }

  const totalPages = Math.ceil(totalResults/resultsPerPage)
  if (totalPages === 0) {
    return null
  }

  const pages = pageNumbers(page, totalPages).map(p => (<Page key={p} page={p}>{p}</Page>))

  const prevPage = () => {
    if (page === 1) {
      return
    }
    setPage(page-1)
  }

  const nextPage = () => {
    if (page === totalPages) {
      return
    }
    setPage(page+1)
  }

  return (
    <div className='sj-paginator'>
      <div className={page === 1 ? 'disabled' : undefined} onClick={prevPage}>&lt;</div>
      {pages}
      <div className={page === totalPages ? 'disabled' : undefined} onClick={nextPage}>&gt;</div>
    </div>
  )
}

Paginator.propTypes = {
  resultsPerPage: React.PropTypes.number.isRequired,
  page: React.PropTypes.number.isRequired,
  totalResults: React.PropTypes.number.isRequired
}

const WrappedPaginator = connect(
  (state, props) => {
    const queryStatus = state.query.queryStatus[props.namespace]
    let totalResults = 0
    if (queryStatus && queryStatus.data) {
      totalResults = parseInt(queryStatus.data.searchResponse.totalResults, 10)
    }
    return {
      page: state.search.page,
      resultsPerPage: state.search.resultsPerPage,
      totalResults
    }
  },
  (dispatch) => ({ setPage: (page) => {
    dispatch(setPage(page))
    document.getElementById('sj-overlay').scrollTop = 0
  } })
)(Paginator)

WrappedPaginator.defaultProps = {
  namespace: 'default'
}

const pageResultsPerPage = ({ pipeline, page, resultsPerPage }) => (
  <div>
    <Value pipeline={pipeline} name="resultsPerPage" value={resultsPerPage} />
    <Value pipeline={pipeline} name="page" value={page} />
  </div>
)

/* PageResultsPerPage renders pipeline values for page and resultsPerPage */
const PageResultsPerPage = connect(
  ({ search }) => ({ page: search.page, resultsPerPage: search.resultsPerPage }),
)(pageResultsPerPage)

const pageLimitOffset = ({ page, resultsPerPage, ...others }) => (
  <div>
    <Limit limit={resultsPerPage} { ...others } />
    <Offset offset={(page - 1) * resultsPerPage} runOnUpdate={true} { ...others} />
  </div>
)

pageLimitOffset.propTypes = {
  page: React.PropTypes.number,
  resultsPerPage: React.PropTypes.number
}

pageLimitOffset.defaultProps = {
  page: 1,
  resultsPerPage: 10
}

/* PageLimitOffset renders Limit and Offset api-components which correspond
 * to the current page and resultsPerPage */
const PageLimitOffset = connect(
  ({ search }) => ({ page: search.page, resultsPerPage: search.resultsPerPage }),
)(pageLimitOffset)

const page = ({ currentPage, page, setPage, children }) => (
  <div className={currentPage === page ? 'current' : null} onClick={() => setPage(page)}>{ children }</div>
)

/* Page is a component which renders a component which can set the page */
const Page = connect(
  ({ search }) => ({ currentPage: search.page }),
  dispatch => ({ setPage: (page) => {
    dispatch(setPage(page))
    document.getElementById('sj-overlay').scrollTop = 0
  } })
)(page)

export { PageLimitOffset, WrappedPaginator, Paginator, PageResultsPerPage }

@@ -154,16 +154,31 @@
  setPage
+, triggerSearch
  %7D from 
@@ -866,16 +866,21 @@
 p(p =%3E (
+%0A    
 %3CPage ke
@@ -893,16 +893,34 @@
 page=%7Bp%7D
+ setPage=%7BsetPage%7D
 %3E%7Bp%7D%3C/Pa
@@ -922,16 +922,19 @@
 %7D%3C/Page%3E
+%0A  
 ))%0A%0A  co
@@ -2022,32 +2022,60 @@
 (setPage(page))%0A
+    // todo: Remove this...%0A
     document.get
@@ -2640,16 +2640,675 @@
 rPage)%0A%0A
+const PipelinePaginator = connect(%0A  (state, props) =%3E %7B%0A    const pipelineStatus = state.pipelines.pipelineStatus%5B%60$%7Bprops.namespace%7D%7C$%7Bprops.pipeline%7D%60%5D%0A    let totalResults = 0%0A    if (pipelineStatus && pipelineStatus.data) %7B%0A      totalResults = parseInt(pipelineStatus.data.searchResponse.totalResults, 10)%0A    %7D%0A    return %7B%0A      page: state.search.page,%0A      resultsPerPage: state.search.resultsPerPage,%0A      totalResults%0A    %7D%0A  %7D,%0A  (dispatch, %7B namespace, pipeline %7D) =%3E (%7B setPage: p =%3E %7B%0A    dispatch(setPage(p))%0A    dispatch(triggerSearch(namespace, pipeline))%0A  %7D %7D)%0A)(Paginator)%0A%0APipelinePaginator.defaultProps = %7B%0A  namespace: 'default'%0A%7D%0A%0A
 const pa
@@ -4271,16 +4271,19 @@
 ge %7D),%0A 
+ //
  dispatc
@@ -4304,32 +4304,35 @@
 e: (page) =%3E %7B%0A 
+ //
    dispatch(setP
@@ -4348,63 +4348,10 @@
 )%0A  
-  document.getElementById('sj-overlay').scrollTop = 0%0A 
+//
  %7D %7D
@@ -4434,11 +4434,30 @@
 sPerPage
+, PipelinePaginator
  %7D%0A

Add Paginator for pipelines