import React from 'react';
import ReactDom from 'react-dom';
import Page from '../index';
import Button from '../../button';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import '../style/v2.scss';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      totalPage: 5,
    };
  }

  render() {
    return (
      <Demo name="分页" doc={<Doc />}>
        <DemoPanel title="不同尺寸">
          <Page
            totalPage={4}
            page={3}
            size="s"
          />
          <br />
          <Page
            totalPage={4}
            page={2}
          />
          <br />
        </DemoPanel>
        <DemoPanel title="监听值变化">
          <Page
            totalPage={3}
            onChange={this.onChange}
          />
        </DemoPanel>
        <DemoPanel title="大量页数">
          <Page
            size="s"
            totalPage={30}
            maxDisplayNumber={7}
          />
        </DemoPanel>
        <DemoPanel title="动态设置当前页">
          <Page
            size="s"
            totalPage={30}
            page={this.state.page}
          />
          <Button onClick={() => this.setState({
            page: Math.floor(Math.random() * 30),
          })}>random</Button>
        </DemoPanel>
        <DemoPanel title="动态设置totalPage">
          <Page
            size="s"
            totalPage={this.state.totalPage}
          />
          <Button onClick={() => this.setState({
            totalPage: Math.floor(Math.random() * 20),
          })}>random</Button>
        </DemoPanel>
        <DemoPanel title="支持手动输入当前页">
          <Page
            size="s"
            inputable
            totalPage={30}
          />
        </DemoPanel>
      </Demo>
    );
  }

  onChange(goPage, prevPage) {
    window.console.log(goPage, prevPage);
  }

}

const demo = document.getElementById('demo');
if (demo) {
  ReactDom.render(<App />, demo);
}