import { COL_SIZE_SENSOR, ROW_SIZE_SENSOR, ID_ROW_INDICATOR, ID_CELL } from '../constants';
import { IColDimensions, IRowDimensions } from '../index.data';

export function queryContainerBox(el: HTMLElement): { w: number; h: number } {
  const container = el.closest('.spread-sheet');
  if (!container) {
    throw new Error('没有找到class-name = spread-sheet 的容器节点');
  }
  const rect = container.getBoundingClientRect();
  return { w: rect.width, h: rect.height };
}

/**
 * 从el中, 查询 每列的宽度和left
 * 利用 预设的 sensor class
 */
export function queryColDimensions(el: HTMLElement): IColDimensions {
  const cols = Array.apply(null, el.querySelectorAll(
    `.${COL_SIZE_SENSOR}`,
  ) as any) as HTMLElement[];
  const dims: IColDimensions = {};
  for (let col of cols) {
    const colId = col.dataset['id']!;
    const left = col.offsetLeft;
    // const width = col.offsetWidth;
    const width = col.getBoundingClientRect().width;
    dims[colId] = { left, width, offsetLeft: 0, offsetWidth: 0 /*占位*/ };
  }
  return dims;
  /* 性能低
  return cols.reduce((acc, col) => {
    const colId = col.dataset['id']!;
    const left = col.offsetLeft;
    const width = col.offsetWidth;
    return { ...acc, [colId]: { left, width } };
  }, {});
  */
}

/**
 * 从el中, 查询 每行的高度和top
 * 利用 预设的 sensor class
 */
export function queryRowDimensions(el: HTMLElement): IRowDimensions {
  const rows = Array.apply(null, el.querySelectorAll(
    `.${ROW_SIZE_SENSOR}`,
  ) as any) as HTMLElement[];
  const dims: IRowDimensions = {};
  for (let row of rows) {
    const rowId = row.dataset['id']!;
    const top = row.offsetTop;
    // const height = row.offsetHeight;
    const height = row.getBoundingClientRect().height;
    dims[rowId] = { top, height, offsetTop: 0, offsetHeight: 0 /*占位*/ };
  }
  return dims;
  /* 性能低
  return rows.reduce((acc, row) => {
    const rowId = row.dataset['id']!;
    const top = row.offsetTop;
    const height = row.offsetHeight;
    return { ...acc, [rowId]: { top, height } };
  }, {});
  */
}

export function getCellAttrsFromEvent(
  e: MouseEvent | KeyboardEvent,
): [string | null, string | null] {
  const cellDom = (e.target as HTMLElement).closest('td,th');
  if (!cellDom) return [null, null];
  const id = cellDom.getAttribute('id');
  if (!id || id.indexOf(':') < 0) return [null, null];

  return id.split(':') as [string, string];
}

export function isCell(el: HTMLElement) {
  const cellDom = el.closest('td,th');
  const id = cellDom && cellDom.getAttribute('id');
  return (
    cellDom && id && id.indexOf(':') >= 0 && [ID_ROW_INDICATOR, ID_CELL].includes(id.split(':')[0])
  );
}