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

// 回收站彻底删除renderer
const containerStyle = {
  cursor: 'pointer',
  padding: '3px',
  width: '21px',
  height: '27px',
  marginLeft: '1px',
  color: '#eb1e1e',
  transition: 'color 0.2s',
  'font-size': '1rem',
};
const template = `
    <span class="delete-renderer iconfont dsk-close"></>
`;
// 当前行的上下文对象
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: '#d51d1d', fontSize: '16px' });
    },
    () => {
      style(container, { color: '#eb1e1e', fontSize: '1rem' });
    }
  );
};

const emitter = getEmitter();

// 删除
export function deleteRenderer(
  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.COMPLETELY_REMOVE, curProject);
  });

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

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

// 删除单价文件
export function deleteRendererPriceFile(
  instance: Handsontable,
  row: number,
  col: number,
  prop: string | number,
  value: any,
  cellProperties: GridSettings
): HTMLElement {
  // 当前行的上下文对象
  const ctx = getCtx(instance, row);

  const container = parse(template) as HTMLElement;

  // 绑定点击事件
  on(container, 'click', () => {
    console.log('删除单价文件');
    ctx.expanded = !ctx.expanded;

    const currentSourceData = instance.getSourceData() as Array<TreeNode>;

    instance.loadData(currentSourceData);
  });

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

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

// 删除费率文件
export function deleteRendererRateFile(
  instance: Handsontable,
  row: number,
  col: number,
  prop: string | number,
  value: any,
  cellProperties: GridSettings
): HTMLElement {
  // 当前行的上下文对象
  const ctx = getCtx(instance, row);

  const container = parse(template) as HTMLElement;

  // 绑定点击事件
  on(container, 'click', () => {
    console.log('删除费率文件');
    ctx.expanded = !ctx.expanded;

    const currentSourceData = instance.getSourceData() as Array<TreeNode>;

    instance.loadData(currentSourceData);
  });

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

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