import React from "react";
import moment, { Moment } from "moment";
import Table, { CellStatus } from "./BaseTable";
import { useTranslation } from "../../i18n";
import {
  RangeDateType,
  CalendarTableType,
  DateChangeContext,
} from "../DateProps";
import { noop } from "../../_util/noop";
import { getNow, isAfter, isBefore, isSame } from "../../datepicker/util";

export interface MonthTableProps {
  /**
   * 当前展示时间
   */
  current: Moment;

  /**
   * 允许选择的时间范围限制
   */
  range?: RangeDateType;

  cellStatus?: (date: Moment) => CellStatus;

  onSelect?: (value: Moment, context: DateChangeContext) => void;

  onTypeChange?: (type: CalendarTableType) => void;

  onCurrentChange?: (current: Moment) => void;

  hideCaption?: boolean;

  disabledMonth?: (date: Moment) => boolean;
}

export function MonthTable({
  current,
  onCurrentChange = noop,
  range,
  onSelect = noop,
  disabledMonth,
  onTypeChange = noop,
  cellStatus = () => CellStatus.Common,
  hideCaption,
}: MonthTableProps) {
  const t = useTranslation();

  const year = current.year();
  const now = getNow(current);

  function genTable(): number[][] {
    return [
      [0, 1, 2, 3],
      [4, 5, 6, 7],
      [8, 9, 10, 11],
    ];
  }

  function renderYear() {
    return (
      <a className="op-item" onClick={() => onTypeChange("year")}>
        {current.format(t.yearFormat)}
      </a>
    );
  }

  const [rangeMin, rangeMax] = range || [null, null];

  function isValid(date) {
    if (moment.isMoment(rangeMin) && isAfter(rangeMin, date, "month")) {
      return false;
    }
    if (moment.isMoment(rangeMax) && isBefore(rangeMax, date, "month")) {
      return false;
    }
    return disabledMonth(date);
  }

  return (
    <Table
      type="month"
      caption={!hideCaption && renderYear()}
      jumperOptions={{
        onNext: () => onCurrentChange(moment(current).add(1, "year")),
        onPrev: () => onCurrentChange(moment(current).subtract(1, "year")),
        onCurrent: () => onCurrentChange(now),
        isCurrent: isSame(current, now, "year"),
        nextDisabled:
          moment.isMoment(rangeMax) &&
          isBefore(
            rangeMax,
            moment(current)
              .set({ month: 0, date: 1 })
              .add(1, "year"),
            "month"
          ),
        prevDisabled:
          moment.isMoment(rangeMin) &&
          isAfter(
            rangeMin,
            moment(current)
              .set({ month: 0, date: 1 })
              .subtract(1, "day"),
            "month"
          ),
        nextTitle: t.nextYear,
        prevTitle: t.prevYear,
        curTitle: t.curYear,
      }}
    >
      {genTable().map((row, index) => (
        <Table.Row key={index}>
          {row.map(month => {
            const m = moment(current).set({
              year,
              month,
              date: 1,
              hour: 0,
              minute: 0,
              second: 0,
              millisecond: 0,
            });
            return (
              <Table.Cell
                key={month}
                name={moment.monthsShort(month)}
                value={m}
                onSelect={onSelect}
                isNow={isSame(m, now, "month")}
                status={cellStatus(m)}
                disabled={!isValid(m)}
                calendarType="month"
              />
            );
          })}
        </Table.Row>
      ))}
    </Table>
  );
}

MonthTable.displayName = "MonthTable";