import type { CellRendererProps } from 'tui-grid/types/renderer';
import type { MenuType } from '~/types/sys/menu';

export class MenuSatisChargerRenderer {
  el: HTMLElement;

  constructor(props: CellRendererProps) {
    const el = document.createElement('div');

    el.style['gap'] = '8px';
    el.className = 'flex justify-center';

    const { rowKey, grid } = props;
    const options = props.columnInfo.renderer.options as any;

    const data = grid.getRow(rowKey) as unknown as MenuType;
    if (!data.menuType.endsWith('API')) {
      if (data?.menuMngId) {
        const { onView, onDelete } = options;
        const viewLink = document.createElement('a');
        const deleteLink = document.createElement('a');

        viewLink.innerHTML = '보기';
        viewLink.onclick = () => onView(data);

        deleteLink.innerHTML = '삭제';
        deleteLink.onclick = () => onDelete(data);

        el.append(viewLink, deleteLink);
      } else {
        const { onEdit } = options;
        const link = document.createElement('a');
        link.innerHTML = '등록';
        link.onclick = () => onEdit(data);

        el.append(link);
      }
    }

    this.el = el;
  }

  beforeDestroy(): void {}

  focused(): void {}

  getElement(): Element {
    return this.el;
  }

  mounted(parent: HTMLElement): void {}

  render(props: CellRendererProps): void {
    this.el.innerHTML = '';
    const { rowKey, grid } = props;
    const options = props.columnInfo.renderer.options as any;

    const data = grid.getRow(rowKey) as unknown as MenuType;
    if (!data.menuType.endsWith('API')) {
      if (data?.menuMngId) {
        const { onView, onDelete } = options;
        const viewLink = document.createElement('a');
        const deleteLink = document.createElement('a');

        viewLink.innerHTML = '보기';
        viewLink.onclick = () => onView(data);

        deleteLink.innerHTML = '삭제';
        deleteLink.onclick = () => onDelete(data);

        this.el.append(viewLink, deleteLink);
      } else {
        const { onEdit } = options;
        const link = document.createElement('a');
        link.innerHTML = '등록';
        link.onclick = () => onEdit(data);

        this.el.append(link);
      }
    }
  }
}