import './demo3.css';
import Nav from '..';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';

const { Item, SubNav } = Nav;
interface PageStates {
  collapse: boolean;
  embeddable: boolean;
}
class App extends React.Component<{}, PageStates> {
  onChange: (val: any) => void;
  changeEmbeddable: (embeddable: any) => void;
  constructor(props) {
    super(props);

    this.state = {
      collapse: false,
      embeddable: false,
    };

    this.onChange = val => {
      this.setState({
        collapse: val,
      });
    };

    this.changeEmbeddable = embeddable => {
      this.setState({
        embeddable,
      });
    };
  }

  render() {
    const { collapse, embeddable } = this.state;
    let iconOnly,
      mode;

    if (collapse) {
      iconOnly = true;
      mode = 'popup';
    } else {
      iconOnly = false;
      mode = 'inline';
    }

    return (
      <div>
        <Switch defaultChecked={false} onChange={this.onChange} size="small" />
        <div className="demo-ctl">
          <Radio.Group
            shape="button"
            size="medium"
            value={embeddable}
            onChange={this.changeEmbeddable}
          >
            <Radio value>embeddable=true</Radio>
            <Radio value={false}>embeddable=false</Radio>
          </Radio.Group>
        </div>
        <Nav
          style={{ width: '200px' }}
          embeddable={embeddable}
          defaultOpenAll
          defaultSelectedKeys={[ '0-1' ]}
          iconOnly={iconOnly}
          hasArrow={false}
          hasTooltip
          mode={mode}
          type="primary"
        >
          <Item icon="calendar"> Schedule </Item>
          <Item icon="email"> Email </Item>
          <Item icon="help"> Help </Item>
          <SubNav icon="set" label="Settings">
            <Item icon="account"> Account </Item>
            <Item icon="exit"> Exit </Item>
          </SubNav>

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

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