/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/16
 */
import React, {Component} from 'react';
import {DatePicker, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * You can set the date with `date` property,
 * if she is not provided, don't worry, this component will be controlled by itself,
 * otherwise, you must provide the `date` property and use callbacks to manage her by yourself.
 *
 * The `date` could be `Date` object or an [legal `dateString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse),
 * if she is an invalid value, hana will reset her to `null`.
 *
 * After selecting a date successful, callback `onChange` will be called,
 * she has two parameters, the first is `date`, the second is a string formatted from `date`.
 *
 * Property `show` and `autoOk` is used for controlling this component more flexible.
 * Use `show`, you could open or close the dialog by yourself.
 * if `autoOk` is true, dialog will be closed automatically after date selected.
 *
 * Except for the default formatting method, hana also provides a property `format`,
 * she is a function used for formatting the date to string.
 *
 * Property `withClear` is used for clearing date.
 *
 * @cn
 * 基础
 *
 * 想要设置日期，请使用`date`属性，但如果你没有提供此属性呢，不要担心，该组件将会工作在自动模式，
 * 但一旦提供了该属性，就必须确保自己对她的控制。
 *
 * 日期接受两种类型的值，一种是js的`Date`对象，一个则是[符合标准的`dateString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse)，
 * 如果传进的是无效值，hana呢，会将其重置为`null`。
 *
 * 当日期选择结束后，回调函数`onChange`将会被调用，她有两个参数，
 * 第一个参数传递`date`的变化，第二个参数则传递日期格式化后的字符串。
 *
 * 属性`show`和`auto`使得组件的使用更加灵活。
 * `show`属性提供了一个接口，可以直接让你自行控制日期选择框的打开或关闭。
 * `autoOk`则提供了一个选项，如果将其设为`true`，当日期被成功选择后，便会自动关闭选择框。
 *
 * 而除了默认的格式化之外，hana提供了一个`format`函数，她接受一个`date`，返回一个格式化后的字符串。
 *
 * `withClear`属性用于清空已选择的日期。
 *
 */
export default class ExampleBase extends Component {
  state = {
    autoDate: null,
    autoText: '',
    controlledDate: new Date(),
    show: false,
    dateString: ''
  };

  render() {
    const {
      autoDate,
      autoText,
      controlledDate,
      show,
      dateString
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={(
            <p>Auto mode, date is `{autoDate === null ? 'null' : autoDate.toString()}`, text is `{autoText}`</p>
          )}
          cn={(
            <p>自动模式，date为`{autoDate === null ? 'null' : autoDate.toString()}`，text为`{autoText}`</p>
          )}
        >
          <DatePicker
            onChange={(date, text) =>
              this.setState({
                autoDate: date,
                autoText: text
              })
            }
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Controlled mode, date will be increased automatically after selection.</p>
          )}
          cn={(
            <p>控制模式，date将会在选择后自增1天。</p>
          )}
        >
          <DatePicker
            date={controlledDate}
            onChange={date => {
              controlledDate.setDate(date.getDate() + 1);
              this.setState({controlledDate});
            }}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Using string as date value</p>
          )}
          cn={(
            <p>使用字符串作为`date`的值</p>
          )}
        >
          <DatePicker
            date={dateString}
            onChange={(date, text) => {
              this.setState({dateString: text});
            }}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Auto ok mode</p>
          )}
          cn={(
            <p>Auto ok 模式</p>
          )}
        >
          <DatePicker
            autoOk
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Using `show`</p>
          )}
          cn={(
            <p>使用`show`属性</p>
          )}
        >
          <div className="flex">
            <Button
              style={{
                marginRight: 12
              }}
              onClick={() => this.setState({show: !show})}
            >
              {this.state.show ? 'Close' : 'Show'}
            </Button>
            <div>
              <DatePicker
                show={show}
              />
            </div>
          </div>
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Format: %d / %m - %y</p>
          )}
          cn={(
            <p>格式化: %d / %m - %y</p>
          )}
        >
          <DatePicker
            format={date => {
              const day = date.getDate();
              const month = date.getMonth();
              const year = date.getFullYear();
              return `${day < 10 ? '0' : ''}${day} \/ ${month < 9 ? '0' : ''}${month + 1} - ${year}`; // eslint-disable-line
            }}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Clear</p>
          )}
          cn={(
            <p>清空</p>
          )}
        >
          <DatePicker
            autoOk
            withClear
          />
        </ExampleBlock>
      </div>
    );
  }
}

想要设置日期，请使用date属性，但如果你没有提供此属性呢，不要担心，该组件将会工作在自动模式， 但一旦提供了该属性，就必须确保自己对她的控制。

日期接受两种类型的值，一种是js的Date对象，一个则是符合标准的dateString， 如果传进的是无效值，hana呢，会将其重置为null。

当日期选择结束后，回调函数onChange将会被调用，她有两个参数， 第一个参数传递date的变化，第二个参数则传递日期格式化后的字符串。

属性show和auto使得组件的使用更加灵活。 show属性提供了一个接口，可以直接让你自行控制日期选择框的打开或关闭。 autoOk则提供了一个选项，如果将其设为true，当日期被成功选择后，便会自动关闭选择框。

而除了默认的格式化之外，hana提供了一个format函数，她接受一个date，返回一个格式化后的字符串。

withClear属性用于清空已选择的日期。

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/20
 */
import React from 'react';
import {DatePicker} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Multi-Languages
 *
 * Hana provides property `lang` to support many languages,
 * 'en', 'cn' and 'jp' are currently supported.
 *
 * @cn
 * 多语言
 *
 * hana提供了`lang`属性用于配置组件的语言，现在支持英文`en`、中文`cn`和日文`jp`。
 *
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>English, lang = 'en'</p>
      )}
      cn={(
        <p>英文，lang = 'en'</p>
      )}
    >
      <DatePicker
        lang={'en'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Chinese, lang = 'cn'</p>
      )}
      cn={(
        <p>中文，lang = 'cn'</p>
      )}
    >
      <DatePicker
        lang={'cn'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Japanese, lang = 'jp'</p>
      )}
      cn={(
        <p>日文，lang = 'jp'</p>
      )}
    >
      <DatePicker
        lang={'jp'}
      />
    </ExampleBlock>
  </div>
);

hana提供了lang属性用于配置组件的语言，现在支持英文en、中文cn和日文jp。

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/20
 */
import React from 'react';
import {DatePicker, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 *@en
 * View types.
 *
 * Set the component will be placed on page.
 *
 * Three view modes are supported,
 * If children is provided, hana will use it as the view component,
 * otherwise, `view` property will decide the default one.
 * `view` could only be `text` now which will place a Text component,
 * and the `click` event will be used as a trigger to open the dialog.
 *
 * @cn
 * 显示类型
 *
 * 设置被日期选择框凭依的组件。
 *
 * 当`children`被提供之时，hana将会用其作为凭依的组件，否则将会根据`view`属性来选择默认的凭依。
 * `view`目前只支持`text`类型，这会提供一个`Text`组件，选择框将会在其被点击时打开。
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>`text` mode</p>
      )}
      cn={(
        <p>`test`模式</p>
      )}
    >
      <DatePicker />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>`custom` mode</p>
      )}
      cn={(
        <p>`custom`模式</p>
      )}
    >
      <DatePicker>
        <Button>
          Show/Close
        </Button>
      </DatePicker>
    </ExampleBlock>
  </div>
);

设置被日期选择框凭依的组件。

当children被提供之时，hana将会用其作为凭依的组件，否则将会根据view属性来选择默认的凭依。 view目前只支持text类型，这会提供一个Text组件，选择框将会在其被点击时打开。

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/20
 */
import React from 'react';
import {DatePicker} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Names
 *
 * This world is colorful, so sometimes you may want to use your favorite names to define something.
 * hana allows you to do this, you could use the `weekdayNames`, `weekdayShortNames`, `monthNames` and `actionNames` properties.
 *
 * @cn
 * 命名
 *
 * 这是一个多彩的世界，所以在某些时候，你一定会想按照自己的喜好来对事物命名。
 * 这里，hana提供了一种方法来使得你可以对`天`、`月份`等命名，你只需要将对应的参数传入即可：
 * `weekdayNames`、`weekdayShortNames`、`monthNames`和`actionNames`
 *
 */
export default () => (
  <div>
    <ExampleBlock>
      <DatePicker
        weekdayNames={[
          '落地',
          '破土',
          '新芽',
          '吐蕾',
          '盛开',
          '结果',
          '重生'
        ]}
        weekdayShortNames={[
          '种',
          '萌',
          '芽',
          '蕾',
          '花',
          '果',
          '落'
        ]}
        monthNames={[
          '正月',
          '杏月',
          '桃月',
          '槐月',
          '蒲月',
          '荷月',
          '巧月',
          '桂月',
          '玄月',
          '阳月',
          '辜月',
          '腊月'
        ]}
        actionNames={{
          ok: '种下种子',
          cancel: '我再想想'
        }}
      />
    </ExampleBlock>
  </div>
);

这是一个多彩的世界，所以在某些时候，你一定会想按照自己的喜好来对事物命名。 这里，hana提供了一种方法来使得你可以对天、月份等命名，你只需要将对应的参数传入即可： weekdayNames、weekdayShortNames、monthNames和actionNames

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/20
 */
import React from 'react';
import {DatePicker} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Date range.
 *
 * Property `yearStart` and `yearEnd` are used for setting range for selectable date.
 *
 * @cn
 * 日期范围
 *
 * 属性`yearStart`和`yearEnd`被用于设定可选的日期范围，指定的是年份。
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>From `2000` to `2100`.</p>
      )}
      cn={(
        <p>从`2000`年到`2100`年。</p>
      )}
    >
      <DatePicker
        yearStart={2000}
        yearEnd={2100}
      />
    </ExampleBlock>
  </div>
);

属性yearStart和yearEnd被用于设定可选的日期范围，指定的是年份。