import * as React from "react";
import { storiesOf } from "@storybook/react";
import {Nav} from "../src/index";
const { Item, Group ,SubNav} = Nav;
storiesOf("Nav", module).add("Nav", () => {
  return (
    <div id='app-wrapper'>
      <div id='app'>
      <Nav
      className="basic-nav"
      direction="hoz"
      type="primary"
      header={<span className="fusion">FUSION</span>}
      footer={<a className="login-in" href="javascript:;">
      Login in
    </a>}
      defaultSelectedKeys={['home']}
      triggerType="hover"
    >
      <Item key="home">Home</Item>
      <SubNav label="Component">
        <Item key="next">Next</Item>
        <Item key="mext">Mext</Item>
      </SubNav>
      <Item key="document">Document</Item>
    </Nav>
      <Nav style={{ width: 240 }} type="primary">
      <Group>
        <Item icon="account">Navigation One</Item>
        <Item icon="account">Navigation Two</Item>
        <Item icon="account">Navigation Three</Item>
      </Group>
      <Group label="Group Label 1">
        <Item icon="account">Navigation One</Item>
        <Item icon="account">Navigation Two</Item>
        <Item icon="account">Navigation Three</Item>
      </Group>
      <Group label="Group Label 2">
        <Item icon="account">Navigation Four</Item>
        <Item icon="account">Navigation Five</Item>
        <Item icon="account">Navigation Six</Item>
      </Group>
    </Nav>
    <Nav
          className="custom-nav"
          mode='inline'
          type="primary"
          direction='ver'
          activeDirection={null}
          triggerType='click'
        >
          <Item>Item 1</Item>
          <Item>Item 2</Item>
          <Item>Item 3</Item>
          <Item>Item 4</Item>
          <SubNav label="Sub Nav">
            <Item>Item 3</Item>
            <Item>Item 4</Item>
            <SubNav label="Sub Nav" icon="account">
              <Item>Item 5</Item>
              <Item>Item 6</Item>
            </SubNav>
          </SubNav>
          <Item icon="account">
            <a href="http://www.taobao.com" target="_blank">
              Taobao
            </a>
          </Item>
        </Nav>
        <Nav
          style={{ width: '200px' }}
          iconOnly={false}
          hasTooltip={true}
        >
          <Item icon="account">Navigation One</Item>
          <Item icon="account">Navigation Two</Item>
          <Item icon="account">Navigation Three</Item>
          <Item icon="account">Navigation Four</Item>
          <Item icon="account">Navigation Five</Item>
          <SubNav icon="account" label="Sub Nav">
            <Item icon="account">Item 1</Item>
            <Item icon="account">Item 2</Item>
            <Item icon="account">Item 3</Item>
            <Item icon="account">Item 4</Item>
          </SubNav>
        </Nav>
        <div>
        <Nav
          className="custom-nav"
          // mode={mode}
          type={'secondary'}
          direction={'hoz'}
          activeDirection={'null'}
          triggerType={'click'}
        >
          <Item>Item 1</Item>
          <Item>Item 2</Item>
          <SubNav label="Sub Nav">
            <Item>Item 3</Item>
            <Item>Item 4</Item>
            <SubNav label="Sub Nav">
              <Item>Item 5</Item>
              <Item>Item 6</Item>
            </SubNav>
          </SubNav>
          <Item icon="account">
            <a href="http://www.taobao.com" target="_blank">
              Taobao
            </a>
          </Item>
        </Nav>
        <Nav
          style={{ width: '200px' }}
          iconOnly={true}
          onlyiconNotext={true}
          hasArrow={false}
          hasTooltip={false}
          type='primary'
        >
          <Item icon="account">项目标题</Item>
          <Item icon="account">项目标题</Item>
          <Item icon="account">项目标题</Item>
          <Item icon="account">项目标题</Item>
          <Item icon="account">项目标题</Item>
          <SubNav icon="account" label="Sub Nav">
            <Item icon="account">Item 1</Item>
            <Item icon="account">Item 2</Item>
            <Item icon="account">Item 3</Item>
            <Item icon="account">Item 4</Item>
          </SubNav>
        </Nav>

      </div>
        </div>
        
    </div>
  );
});
