import React from 'react';
import ReactDom from 'react-dom';
import Datepicker from '../index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import '../style/v2.scss'; // 用户可以选择是否引用v2样式
// @require '../../style/reset.scss'

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleSelect = this.handleSelect.bind(this);
    this.handleMonthChange = this.handleMonthChange.bind(this);
    this.state = {
      logArr1: [],
      logArr2: [],
    };
  }

  handleSelect(newDate, oldDate) {
    const logs = [`newDate: ${newDate}`, `oldDate: ${oldDate}`];

    this.setState({
      logArr1: logs,
    });
  }

  handleMonthChange(newDate, oldDate) {
    const logs = [`newMonth: ${newDate}`, `oldMonth: ${oldDate}`];

    this.setState({
      logArr2: logs,
    });
  }

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

  render() {
    return (
      <Demo name="Datepicker" doc={<Doc />}>
        <DemoPanel title="默认用法">
          <Datepicker />
        </DemoPanel>
        <DemoPanel title="默认打开日历面板">
          <Datepicker
            showPicker
          />
        </DemoPanel>
        <DemoPanel title="设置placeholder">
          <Datepicker
            placeholder={'点击选择日期'}
          />
        </DemoPanel>
        <DemoPanel title="设置选中日期">
          <Datepicker
            value={new Date()}
          />
        </DemoPanel>
        <DemoPanel title="设置日历面板当前月份">
          <Datepicker
            placeholder={'点击选择日期'}
            initMonth={new Date(2016, 5, 6)}
          />
        </DemoPanel>
        <DemoPanel title="设置日历可选日期范围">
          <Datepicker
            placeholder={'点击选择日期'}
            initMonth={new Date(2016, 5, 6)}
            minDate={new Date(2016, 5, 5)}
            maxDate={new Date(2016, 5, 25)}
          />
        </DemoPanel>
        <DemoPanel title="设置日历自定义class">
          <Datepicker
            placeholder={'点击选择日期'}
            className={'input-border-red'}
          />
        </DemoPanel>
        <DemoPanel title="日期字符串格式">
          <Datepicker
            value={new Date()}
            dateFormat={'YYYY年MM月DD日'}
          />
        </DemoPanel>
        <DemoPanel title="选择的日期改变时回调函数">
          {this.renderLogs(this.state.logArr1)}
          <Datepicker
            placeholder={'点击选择日期'}
            onChange={this.handleSelect}
          />
        </DemoPanel>
        <DemoPanel title="切换月份时回调函数">
          {this.renderLogs(this.state.logArr2)}
          <Datepicker
            placeholder={'点击选择日期'}
            onChangeMonth={this.handleMonthChange}
          />
        </DemoPanel>
        <DemoPanel title="inline日历模式">
          <Datepicker
            inline
          />
        </DemoPanel>
        <DemoPanel title="设置日历z-index">
          <p>下面Datepicker弹出的日历的z-inex被设置为123</p>
          <Datepicker
            calendarZindex={123}
            placeholder={'点击选择日期'}
          />
        </DemoPanel>
        <DemoPanel title="显示日历icon">
          <Datepicker
            placeholder={'点击选择日期'}
            showIcon
          />
        </DemoPanel>
        <DemoPanel title="设置清空按钮">
          <Datepicker
            value={new Date()}
            placeholder={'点击选择日期'}
            showClean
          />
          <span
            style={{
              display: 'inline-block',
              width: '100px',
            }}
          ></span>
          <Datepicker
            value={new Date()}
            placeholder={'点击选择日期'}
            showClean
            showIcon
          />
        </DemoPanel>
        <DemoPanel title="禁用(disbled)">
          <Datepicker
            value={new Date()}
            placeholder={'点击选择日期'}
            showClean
            showIcon
            disabled
          />
        </DemoPanel>
        <DemoPanel title="设置input元素宽度">
          <Datepicker
            inputWidth={240}
          />
        </DemoPanel>
        <DemoPanel title="周选模式">
          <Datepicker
            inputWidth={240}
            mode="week"
            rangeJoin={' 至 '}
          />
          <span
            style={{
              display: 'inline-block',
              width: '100px',
            }}
          ></span>
          <Datepicker
            inputWidth={240}
            mode="week"
            initMonth={new Date(2016, 7, 16)}
            selectedWeek={new Date(2016, 7, 16)}
            rangeJoin={' 至 '}
            minDate={new Date(2016, 7, 4)}
            maxDate={new Date(2016, 7, 24)}
          />
        </DemoPanel>
        <DemoPanel title="自选时间范围">
          <Datepicker
            inputWidth={240}
            mode="range"
            rangeJoin={' 至 '}
          />
          <span
            style={{
              display: 'inline-block',
              width: '100px',
            }}
          ></span>
          <Datepicker
            inputWidth={240}
            mode="range"
            selectedRange={{
              from: new Date(2019, 11, 10),
              to: new Date(2020, 0, 10),
            }}
            rangeJoin={' 至 '}
          />
          <br />
          <div
            style={{
              height: '50px',
            }}
          ></div>
          <Datepicker
            inputWidth={240}
            mode="range"
            inline
            selectedRange={{
              from: new Date(2019, 11, 10),
              to: new Date(2020, 0, 10),
            }}
            rangeJoin={' 至 '}
          />
        </DemoPanel>
        <DemoPanel title="高亮日期">
          <Datepicker
            inline
            highLightDates={[Date.now(), Date.now() - 24 * 60 * 60 * 1000]}
            onlyEnableHighLightDate
          />
        </DemoPanel>
      </Demo>
    );
  }
}


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

if (demo) {
  ReactDom.render(<App />, demo);
}