import React from 'react';
import ReactDOM from 'react-dom';
import Shell from '..';
import { Icon, Radio, Search } from '../..';

const RadioGroup = Radio.Group;

interface IState {
  size: 'small' | 'medium' | 'large';
}

class App extends React.Component<{}, IState> {
  state: IState = {
    size: 'small',
  };

  onChange = size => {
    this.setState({ size });
  };

  render() {
    return (
      <div>
        <RadioGroup
          value={this.state.size}
          onChange={this.onChange}
          aria-labelledby="groupId"
        >
          <Radio id="small" value="small">
            small
          </Radio>
          <Radio id="medium" value="medium">
            medium
          </Radio>
          <Radio id="large" value="large">
            large
          </Radio>
        </RadioGroup>
        <br />
        <br />
        <Shell size={this.state.size} className={'iframe-hack'} style={{ border: '1px solid #eee' }}>
          <Shell.Branding>
            <div className="rectangular"></div>
            <span style={{ marginLeft: 10 }}>App Name</span>
          </Shell.Branding>
          <Shell.Navigation direction="hoz">
            <Search
              key="2"
              shape="simple"
              type="dark"
              size={this.state.size}
              placeholder="Search"
              style={{ width: '200px' }}
            />
          </Shell.Navigation>
          <Shell.Action>
            <Icon type="ic_tongzhi" />
            <img
              src="https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png"
              className="avatar"
              alt="用户头像"
            />
            <span style={{ marginLeft: 10 }}>MyName</span>
          </Shell.Action>

          <Shell.Content>
            <div style={{ minHeight: 1200, background: '#fff' }}></div>
          </Shell.Content>

          <Shell.Footer>
            <span>Alibaba Fusion</span>
            <span>@ 2019 Alibaba Piecework 版权所有</span>
          </Shell.Footer>
        </Shell>
      </div>
    );
  }
}

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