import * as React from 'react';
import {SFC} from 'react';
import {Nav, NavLink} from 'reactstrap';
import {
  Alert,
  Button,
  Container,
  Icon,
  Layout,
  UserMenu,
  UserMenuImage,
  Welcome} from './../../components';

const drawerContent = (
  <Nav vertical>
    <NavLink
      className="toggle-drawer active"
      href="#"
    >
      Link 1
    </NavLink>

    <NavLink
      className="toggle-drawer"
      href="#"
    >
      Link 2
    </NavLink>
  </Nav>
);

const userMenu = (
  <UserMenu
    userImage={
      <UserMenuImage
        imageUrl="https://s.gravatar.com/avatar/73e74124b7261376a2686fa5d1ecd9bd?s=480&r=pg"
        userName="Danilo Barros"
      />
    }
  >
    <div>
      <div className="d-block">
        <strong>Danilo Barros</strong>
      </div>
      <div className="d-block">danilo@beakyn.com</div>
      <div className="d-block">
        <a className="dropdown-menu-link" href="#">Logout</a>
      </div>
      <div className="dropdown-divider" />
      <div className="d-block">
        <small>v1.3.1</small>
      </div>
    </div>
  </UserMenu>
);

export const LayoutExample: SFC<{}> = () => (
  <Layout
    breadcrumbs={['Page Title']}
    drawerHeaderTitle="App Name"
    drawerContent={drawerContent}
    drawerOpen={false}
    elementLeft={
      <Button
        className="btn-icon btn-square toggle-drawer"
        color="link"
        onClick={() => console.log('Home clicked')}
      >
        <Icon name="home" />
      </Button>
    }
    elementRight={userMenu}
    loading
    mainNavTitle="App Name"
  >
    <div className="page-comp" style={{marginTop: '4rem'}}>
      <div className="oage-comp-body">
        <Welcome userName="Danilo Barros">
          This is the Welcome component.
        </Welcome>

        <Container>
          {/* <Alert color="success">Alert</Alert> */}
          <Button color="primary">Button</Button>
        </Container>
      </div>
    </div>
  </Layout>
);

LayoutExample.displayName = 'LayoutExample';