
<script>
import Item from './item';

const WEEKS_LEN = 7;
const WEEKS = ['日', '一', '二', '三', '四', '五', '六'];

export default {
  functional: true,
  props: {
    firstDayOfWeek: Number,
    weeks: Array,
    onClick: Function,
    onMouseEnter: { type: Function, default: () => {} }
  },
  render(h, ctx) {
    let weekArr = [];
    let wi = ctx.props.firstDayOfWeek;
    while (weekArr.length < WEEKS_LEN) {
      weekArr.push(WEEKS[wi]);
      wi = (wi + WEEKS_LEN + 1) % WEEKS_LEN;
    }

    return (
      <table class={['hive-date-day', ctx.data.class]}>
        <thead>
          <tr>{weekArr.map((w, i) => <th key={i}>{w}</th>)}</tr>
        </thead>

        <tbody>
          {
            ctx.props.weeks.map((week, i) => (
              <tr>
                {
                  week.map((w, j) => h(Item,
                    {
                      class: 'hive-date-day__item',
                      key: j,
                      props: {
                        onClick: ctx.props.onClick,
                        onMouseEnter: ctx.props.onMouseEnter,
                        ...w
                      }
                    }
                  ))
                }
              </tr>
            ))
          }
        </tbody>
      </table>
    );
  }
};
</script>
