import { h, Component } from 'preact';
import { route } from 'preact-router';
import WBNavbar from 'wb-navbar';
import WBProjectListing from 'wb-project-listing';
import WBInlineSearch from 'wb-inline-search';
import WBProjectCrumbs from 'wb-project-crumbs';
import WBTabs from 'wb-tabs';
import WBProcessListing from 'wb-process-listing';

class WBBrowse extends Component {
  route(params) {
    route('/browse/' +
      ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
      ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
      ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
      ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
      ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || '')));
  }

  render({ ownerUuid, activePage, appCallbacks, appState,
    objTypeTab, collectionPage, processPage, workflowPage }) {

    return (
      <div>
        <WBNavbar items={ [
          { 'name': 'Home', 'id': 'home', 'active': (ownerUuid === appState.currentUser.uuid) },
          { 'name': 'All Projects', 'id': 'all-projects', 'active': (!ownerUuid) },
          { 'name': 'User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
        ] } rhs={ (
          <WBInlineSearch />
        ) } onItemClicked={ appCallbacks.navbarItemClicked } />

        <WBProjectCrumbs uuid={ ownerUuid } appState={ appState }
          onItemClicked={ item => route('/browse/' + item['uuid']) } />

        <WBTabs tabs={ [ { 'name': 'Projects', 'isActive': true } ] } />

        <WBProjectListing arvHost={ appState.arvHost }
          arvToken={ appState.arvToken }
          ownerUuid={ ownerUuid }
          itemsPerPage="5"
          activePage={ Number(activePage || 0) }
          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />

        <WBTabs tabs={ [
          { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
          { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
          { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
          onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />

        {
          (!objTypeTab || objTypeTab === 'collection') ? (
            null
          ) : (objTypeTab === 'process' ? (
            <WBProcessListing appState={ appState }
              ownerUuid={ ownerUuid }
              itemsPerPage="20"
              activePage={ Number(processPage || 0) }
              onPageChanged={ i => this.route({ 'processPage': i }) } />
          ) : (objTypeTab === 'workflow' ? (
            null
          ) : null))
        }
      </div>
    );
  }
}

export default WBBrowse;