import * as React from 'react';
import * as classNames from 'classnames';
import {CSSProperties, PureComponent} from 'react';
import {Nav, NavItem, NavLink} from 'reactstrap';
import {Layout, Page, PageBody} from './../../components';
import {ComplexDatagrid, MapDatagrid, SimpleDatagrid} from './Datagrid';

import './../styles/ListPageExample';

const styles = {
  pageComp: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    paddingLeft: 10,
    '-webkit-box-orient': 'vertical',
    '-webkit-box-direction': 'normal',
  } as CSSProperties,
  pageCompBody: {
    position: 'fixed',
    top: 54,
    left: 10,
    height: 'calc(100vh - 54px)',
    width: 'calc(100% - 10px)',
    overflow: 'hidden',
  } as CSSProperties,
};

const DrawerContent = ({onClickLink}) => (
  <div>
    <Nav vertical>
      <NavItem>
        <NavLink
          className="toggle-drawer active"
          href="#"
          onClick={onClickLink}
        >
          Link 1
        </NavLink>
      </NavItem>

      <NavItem>
        <NavLink
          className="toggle-drawer"
          href="#"
          onClick={onClickLink}
        >
          Link 2
        </NavLink>
      </NavItem>
    </Nav>

    {/* <hr /> */}

    <h3 className="section-title">Section</h3>

    <Nav vertical>
      <NavItem>
      <NavLink
        className="toggle-drawer"
        target="_blank"
        href="https://www.beakyn.com/"
        rel="noopener"
      >
        Beakyn
      </NavLink>
      </NavItem>

      <NavItem>
      <NavLink
        className="toggle-drawer"
        target="_blank"
        href="https://www.google.com"
        rel="noopener"
      >
        Google
      </NavLink>
      </NavItem>
    </Nav>

    <div className="brands">
      <img
        src="https://storage.googleapis.com/outfront/assets/images/beakyn-brand.png"
        width="32"
        height="auto"
        alt="Beakyn Company"
      />
    </div>
  </div>
);

export interface ListPageExampleState {
  drawerOpen: boolean;
}

export class ListPageExample extends PureComponent<{}, ListPageExampleState> {
  state: ListPageExampleState = {
    drawerOpen: false,
  };

  render() {
    return (
      <Layout
        breadcrumbs={[<a href="#">Link to List Page</a>, 'Other Path']}
        drawerContent={this.renderDrawerContent()}
        drawerHeaderTitle="App Name"
        drawerOpen={this.state.drawerOpen}
        mainNavTitle="Some Page"
        onDrawerClose={this.handleDrawerClose}
        onDrawerOpen={this.handleDrawerOpen}
      >
        <Page>
          <PageBody fullscreen noScrollbars>
            <ComplexDatagrid />
          </PageBody>
        </Page>
      </Layout>
    );
  }

  renderDrawerContent = () => {
    return <DrawerContent onClickLink={this.handleDrawerClose} />;
  }

  handleDrawerOpen = () => {
    this.setState({drawerOpen: true});
  }

  handleDrawerClose = () => {
    this.setState({drawerOpen: false});
  }
}