<script>
import Button from '../../button';

export default {
  functional: true,
  props: {
    year: Number,
    month: Number,
    type: { type: String, default: 'date', validator(v) { return ['year', 'month', 'date'].indexOf(v) > -1; } },
    disableNextYear: Boolean,
    disablePrevYear: Boolean,
    disableNextMonth: Boolean,
    disablePrevMonth: Boolean,
    onPrevOrNext: Function,
    onTypeChange: Function
  },
  render(h, ctx) {
    const {
      year,
      month,
      type,
      disableNextYear,
      disablePrevYear,
      disableNextMonth,
      disablePrevMonth,
      onPrevOrNext,
      onTypeChange
    } = ctx.props;

    let endYear;
    let startYear;

    if (type === 'year') {
      startYear = parseInt(year / 10) * 10;
      endYear = startYear + 9;
    }
    return (
      <div class="hive-date-header">
        <Button
          class="hive-date-header__btn hive-date-header__btn--prev-year"
          type="text"
          size="small"
          icon="double_left"
          onClick={() => onPrevOrNext('year', 'prev')}
          disabled={disablePrevYear}
        />

        <Button
          class="hive-date-header__btn hive-date-header__btn--prev-month"
          type="text"
          size="small"
          icon="left"
          onClick={() => onPrevOrNext('month', 'prev')}
          disabled={disablePrevMonth}
        />

        <div class="hive-date-header__text">
          {type === 'year' && [<span>{startYear} </span>, ' - ', <span> {endYear}</span>]}

          <Button
            class={['hive-date-header__btn', {
              'hive-date-header__btn--disabled': type === 'year'
            }]}
            type="text"
            onClick={() => { onTypeChange('year'); }}
            size="small"
          >
            {year + ' 年'}
          </Button>

          <Button
            class={['hive-date-header__btn', {
              'hive-date-header__btn--disabled': type !== 'date'
            }]}
            type="text"
            onClick={() => { onTypeChange('month'); }}
            size="small"
          >
            {month + 1 + ' 月'}
          </Button>
        </div>

        <Button
          class="hive-date-header__btn hive-date-header__btn--next-month"
          type="text"
          size="small"
          icon="right"
          onClick={() => onPrevOrNext('month', 'next')}
          disabled={disableNextMonth}
        />

        <Button
          class="hive-date-header__btn hive-date-header__btn--next-year"
          type="text"
          size="small"
          icon="double_left"
          onClick={() => onPrevOrNext('year', 'next')}
          disabled={disableNextYear}
        />
      </div>
    );
  }
};
</script>
