import { h, Component } from 'preact';
import WBTabs from 'wb-tabs';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';
import WBProjectListing from 'wb-project-listing';
import WBNavbar from 'wb-navbar';

class WBApp extends Component {
  render({}, { activePage }) {
    return (
      <div>
        <h1>WBApp <i class="fab fa-adobe"></i></h1>
        <WBNavbar />
        <WBProjectListing arvHost="api.arkau.roche.com"
          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
          itemsPerPage="5" />
        <WBPagination numPages={ 0 } activePage={ 0 } />
        <WBPagination numPages={ 100 } activePage={ activePage || 0 }
          onPageChanged={ i => this.setState({ 'activePage': i }) } />
        <WBTable
          columns={ [ 'Name', 'Description', 'Size' ] }
          rows={ [
            [ 'Name', 'Description', '0 bytes'],
            [ 'Name', 'Description', '0 bytes'],
            [ 'Name', 'Description', '0 bytes'],
            [ 'Name', 'Description', '0 bytes'],
            [ 'Name', 'Description', '0 bytes']
          ] } />
        <WBTabs tabs={ [
          { 'name': 'Ala', 'isActive': true },
          "Ma",
          { 'name': 'Kota', 'isDisabled': true }
        ] } onTabChanged={ idx => alert(idx) } />
      </div>
    );
  }
}

export default WBApp;