import { useInjectPanel } from '../PanelContext';
import type { GenerateConfig } from '../generate';
import { getLastDay } from '../utils/timeUtil';
import type { PanelMode } from '../interface';
import { getCellDateDisabled } from '../utils/dateUtil';
import { VueNode } from '../../_util/type';
import classNames from '../../_util/classNames';

export type PanelBodyProps<DateType> = {
  prefixCls: string;
  disabledDate?: (date: DateType) => boolean;
  onSelect: (value: DateType) => void;
  picker?: PanelMode;

  // By panel
  headerCells?: VueNode;
  rowNum: number;
  colNum: number;
  baseDate: DateType;
  getCellClassName: (date: DateType) => Record<string, boolean | undefined>;
  getCellDate: (date: DateType, offset: number) => DateType;
  getCellText: (date: DateType) => VueNode;
  getCellNode?: (date: DateType) => VueNode;
  titleCell?: (date: DateType) => string;
  generateConfig: GenerateConfig<DateType>;

  // Used for week panel
  prefixColumn?: (date: DateType) => VueNode;
  rowClassName?: (date: DateType) => string;
};

function PanelBody<DateType>({
  prefixCls,
  disabledDate,
  onSelect,
  picker,
  rowNum,
  colNum,
  prefixColumn,
  rowClassName,
  baseDate,
  getCellClassName,
  getCellText,
  getCellNode,
  getCellDate,
  generateConfig,
  titleCell,
  headerCells,
}: PanelBodyProps<DateType>) {
  const { onDateMouseEnter, onDateMouseLeave, mode } = useInjectPanel()

  const cellPrefixCls = `${prefixCls}-cell`;

  // =============================== Body ===============================
  const rows: VueNode[] = [];

  for (let i = 0; i < rowNum; i += 1) {
    const row: VueNode[] = [];
    let rowStartDate: DateType;

    for (let j = 0; j < colNum; j += 1) {
      const offset = i * colNum + j;
      const currentDate = getCellDate(baseDate, offset);
      const disabled = getCellDateDisabled({
        cellDate: currentDate,
        mode,
        disabledDate,
        generateConfig,
      });

      if (j === 0) {
        rowStartDate = currentDate;

        if (prefixColumn) {
          row.push(prefixColumn(rowStartDate));
        }
      }

      const title = titleCell && titleCell(currentDate);

      row.push(
        <td
          key={j}
          title={title}
          class={classNames(cellPrefixCls, {
            [`${cellPrefixCls}-disabled`]: disabled,
            [`${cellPrefixCls}-start`]:
              getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0),
            [`${cellPrefixCls}-end`]:
              title === getLastDay(generateConfig, currentDate) ||
              (picker === 'year' && Number(title) % 10 === 9),
            ...getCellClassName(currentDate),
          })}
          onClick={() => {
            if (!disabled) {
              onSelect(currentDate);
            }
          }}
          onMouseenter={() => {
            if (!disabled && onDateMouseEnter) {
              onDateMouseEnter(currentDate);
            }
          }}
          onMouseleave={() => {
            if (!disabled && onDateMouseLeave) {
              onDateMouseLeave(currentDate);
            }
          }}
        >
          {getCellNode ? (
            getCellNode(currentDate)
          ) : (
            <div class={`${cellPrefixCls}-inner`}>{getCellText(currentDate)}</div>
          )}
        </td>,
      );
    }

    rows.push(
      <tr key={i} class={rowClassName && rowClassName(rowStartDate!)}>
        {row}
      </tr>,
    );
  }

  return (
    <div class={`${prefixCls}-body`}>
      <table class={`${prefixCls}-content`}>
        {headerCells && (
          <thead>
            <tr>{headerCells}</tr>
          </thead>
        )}
        <tbody>{rows}</tbody>
      </table>
    </div>
  );
}

PanelBody.displayName = 'PanelBody';
PanelBody.inheritAttrs = false;

export default PanelBody;