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 QuarterTableProps {
  /**
   * 当前展示时间
   */
  current: Moment;

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

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

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

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

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

  hideCaption?: boolean;

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

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

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

  function genTable(): number[][] {
    return [[1, 2, 3, 4]];
  }

  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, "quarter")) {
      return false;
    }
    if (moment.isMoment(rangeMax) && isBefore(rangeMax, date, "quarter")) {
      return false;
    }
    return disabledQuarter(date);
  }

  return (
    <Table
      type="quarter"
      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({ quarter: 1, date: 1 })
              .add(1, "year"),
            "quarter"
          ),
        prevDisabled:
          moment.isMoment(rangeMin) &&
          isAfter(
            rangeMin,
            moment(current)
              .set({ quarter: 1, date: 1 })
              .subtract(1, "day"),
            "quarter"
          ),
        nextTitle: t.nextYear,
        prevTitle: t.prevYear,
        curTitle: t.curYear,
      }}
    >
      {genTable().map((row, index) => (
        <Table.Row key={index}>
          {row.map(quarter => {
            const m = moment(current).set({
              year,
              quarter,
              date: 1,
              hour: 0,
              minute: 0,
              second: 0,
              millisecond: 0,
            });
            return (
              <Table.Cell
                key={quarter}
                name={`Q${quarter}`}
                value={m}
                onSelect={onSelect}
                isNow={isSame(m, now, "quarter")}
                status={cellStatus(m)}
                disabled={!isValid(m)}
                calendarType="quarter"
              />
            );
          })}
        </Table.Row>
      ))}
    </Table>
  );
}

QuarterTable.displayName = "QuarterTable";