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';

class WBBrowse extends Component {
  render({ ownerUuid, activePage, appCallbacks, appState }) {
    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']) } />

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

export default WBBrowse;