import './demo5.css';
import Nav from '..';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
const { Item, SubNav } = Nav;
interface PageStates {
  openMode: string;
}
class App extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);
    this.state = {
      openMode: 'single',
    };
  }
  setValue(openMode) {
    this.setState({
      openMode,
    });
  }

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

    return (
      <div>
        <div className="demo-ctl">
          <Radio.Group
            shape="button"
            size="medium"
            value={openMode}
            onChange={this.setValue.bind(this)}
          >
            <Radio value="single">openMode="single"</Radio>
            <Radio value="multiple">openMode="multiple"</Radio>
          </Radio.Group>
        </div>
        <Nav
          style={{ width: 240 }}
          openMode={openMode as 'single' | 'multiple'}
          defaultOpenKeys={[ '0-0' ]}
        >
          <SubNav label="Sub Nav 1">
            <Item>Item 1</Item>
          </SubNav>
          <SubNav label="Sub Nav 2">
            <Item>Item 1</Item>
            <Item>Item 2</Item>
            <SubNav label="Sub Nav 1">
              <Item>Item 1</Item>
              <Item>Item 2</Item>
            </SubNav>
            <SubNav label="Sub Nav 2">
              <Item>Item 1</Item>
              <Item>Item 2</Item>
            </SubNav>
          </SubNav>
          <SubNav label="Sub Nav 3">
            <Item>Item 1</Item>
            <Item>Item 2</Item>
            <Item>Item 3</Item>
            <SubNav label="Sub Nav 1">
              <Item>Item 1</Item>
              <Item>Item 2</Item>
              <Item>Item 3</Item>
            </SubNav>
            <SubNav label="Sub Nav 2">
              <Item>Item 1</Item>
              <Item>Item 2</Item>
              <Item>Item 3</Item>
            </SubNav>
            <SubNav label="Sub Nav 3">
              <Item>Item 1</Item>
              <Item>Item 2</Item>
              <Item>Item 3</Item>
            </SubNav>
          </SubNav>
          <Item>Item</Item>
        </Nav>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('nav-demo-5'));