// @require '../../style/reset.scss'
// @require './demo.scss'

import React from 'react';
import ReactDom from 'react-dom';
import Monthpicker from '../index';
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 = {
      logArr1: [],
      logArr2: [],
    };
  }

  handleSelect = (newMonth, oldMonth) => {
    this.setState({
      logArr1: [`newMonth: ${newMonth}`, `oldMonth: ${oldMonth}`]
    });
  }

  handleYearChange = (newYear, oldYear) => {
    this.setState({
      logArr2: [`newYear: ${newYear}`, `oldYear: ${oldYear}`]
    });
  }

  renderLogs(logArr) {
    return logArr.map((log, index) => {
      return (
        <p
          key={index}
        >
          {log}
        </p>
      );
    });
  }

  render() {
    return (
      <Demo name="Monthpicker" doc={<Doc />}>
        <DemoPanel title="默认用法">
          <Monthpicker />
        </DemoPanel>
        <DemoPanel title="默认打开选择器面板">
          <Monthpicker
            showPicker
          />
        </DemoPanel>
        <DemoPanel title="设置placeholder">
          <Monthpicker
            placeholder={'点击选择月份'}
          />
        </DemoPanel>
        <DemoPanel title="设置选中月份">
          <Monthpicker
            value={new Date()}
          />
        </DemoPanel>
        <DemoPanel title="设置选择器面板当前年份">
          <Monthpicker
            initYear={new Date(2016, 1, 1)}
          />
        </DemoPanel>
        <DemoPanel title="设置可选月份范围">
          <Monthpicker
            initYear={new Date(2017, 1, 1)}
            minDate={new Date(2017, 1, 1)}
            maxDate={new Date(2017, 9, 1)}
          />
        </DemoPanel>
        <DemoPanel title="设置日历自定义class">
          <Monthpicker
            className={'input-border-red'}
          />
        </DemoPanel>
        <DemoPanel title="月份字符串格式">
          <Monthpicker
            value={new Date()}
            dateFormat={'YYYY-MM'}
          />
        </DemoPanel>
        <DemoPanel title="选择的月份改变时的回调函数">
          {this.renderLogs(this.state.logArr1)}
          <Monthpicker
            onChange={this.handleSelect}
          />
        </DemoPanel>
        <DemoPanel title="切换年份时回调函数">
          {this.renderLogs(this.state.logArr2)}
          <Monthpicker
            onChangeYear={this.handleYearChange}
          />
        </DemoPanel>
        <DemoPanel title="选择器inline模式">
          <Monthpicker
            inline
          />
        </DemoPanel>
        <DemoPanel title="设置选择器z-index">
          <p>下面monthPicker弹出的选择器的z-inex被设置为123</p>
          <Monthpicker
            pickerZindex={123}
          />
        </DemoPanel>
        <DemoPanel title="隐藏输入框的日历icon">
          <p>默认为显示icon</p>
          <Monthpicker
            showIcon={false}
          />
        </DemoPanel>
        <DemoPanel title="设置清空按钮">
          <Monthpicker
            value={new Date()}
            showClean
          />
        </DemoPanel>
        <DemoPanel title="禁用(disbled)">
          <Monthpicker
            value={new Date()}
            disabled
          />
        </DemoPanel>
        <DemoPanel title="设置input元素宽度">
          <Monthpicker
            inputWidth={240}
          />
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');

// 会被首页调用，判断下有无节点
if (demo) {
  ReactDom.render(<App />, demo);
}