import './demo2.css';
import Nav from '..';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
const { Item, SubNav } = Nav;
interface PageStates {
  type: string;
}
class App extends React.Component<{}, PageStates> {
  changeType: (type: any) => void;
  constructor(props) {
    super(props);

    this.state = {
      type: 'normal',
    };

    this.changeType = type => {
      this.setState({
        type,
      });
    };
  }

  render() {
    const { type } = this.state;

    return (
      <div>
        <div className="demo-ctl">
          <Radio.Group
            shape="button"
            size="medium"
            value={type}
            onChange={this.changeType}
          >
            <Radio value="normal">type="normal"</Radio>
            <Radio value="primary">type="primary"</Radio>
            <Radio value="secondary">type="secondary"</Radio>
            <Radio value="line">type="line"</Radio>
          </Radio.Group>
        </div>
        <Nav
          style={{ width: '200px' }}
          type={type as 'normal' | 'line' | 'primary' | 'secondary'}
          defaultOpenAll
          size='medium'
        >
          <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"><a href="111111111">Navigation Five</a></Item>
          <SubNav icon="account" label="Sub Nav">

            <SubNav icon="account" label="Sub item1 Nav">
              <Item icon="account"><a href="222222">Item 1</a></Item>
              <Item icon="account">Item 2</Item>

            </SubNav>
            <Item icon="account">Item 2</Item>
            <Item icon="account">Item 3</Item>
            <Item icon="account">Item 4</Item>
          </SubNav>
        </Nav>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('nav-demo-2'));