import { hover, on, parse, style } from '@/utils/frontend/dom';
import { TreeNode } from '@sc/tree';
import { DeleteEnum, IProject } from '@sc/types';
import { EmitterType, getEmitter } from '@/utils/frontend/emitter';
import { GridSettings } from '@sc/handsontable';

const containerStyle = {
  cursor: 'pointer',
  padding: '3px',
  width: '21px',
  height: '27px',
  marginLeft: '1px',
  color: '#409eff',
  transition: 'color 0.2s',
  'font-size': '1rem',
};
const template = `
    <span class="recover-renderer iconfont dsk-undo"></>
`;

// 当前行的上下文对象
const getCtx = (instance: Handsontable, row: number) => {
  // 当前行的源数据
  const rowSourceData = instance.getSourceDataAtRow(row) as TreeNode;
  // 当前行的上下文对象
  return rowSourceData.getCtx();
};

const hoverEffect = (container: HTMLElement) => {
  // 鼠标 hover 变色
  hover(
    container,
    () => {
      style(container, { color: '#007bff', fontSize: '16px' });
    },
    () => {
      style(container, { color: '#409eff', fontSize: '1rem' });
    }
  );
};

const emitter = getEmitter();

// 恢复按钮渲染器
export default function recoverRenderer(
  instance: Handsontable,
  row: number,
  col: number,
  prop: string | number,
  value: DeleteEnum,
  cellProperties: GridSettings
): HTMLElement {
  if (!value || value === DeleteEnum.NORMAL) {
    return parse('<span></span>') as HTMLElement;
  }
  const container = parse(template) as HTMLElement;

  // 绑定点击事件
  on(container, 'click', () => {
    const curProject = instance.getSourceDataAtRow(row) as TreeNode<IProject>;
    emitter.emit(EmitterType.RECYCLE, curProject);
  });

  // 鼠标 hover 变色
  hoverEffect(container);

  /* == 设置样式 == */
  style(container, containerStyle);
  return container;
}