<script setup lang="ts">
import 'tui-grid/dist/tui-grid.css';
import 'tui-date-picker/dist/tui-date-picker.min.css';
import Grid, { type RowKey } from 'tui-grid';
import { cloneDeep } from 'lodash-es';
import type { DataGridType } from '~/types/data/grid';
import type { GridEventName, OptRow } from 'tui-grid/types/options';
import { TUI_GRID_THEME } from '~/constants/theme/grid';

Grid.setLanguage('ko', {
  display: {
    noData: '조회된 데이터가 존재하지 않습니다.'
  }
});

Grid.applyTheme('default', TUI_GRID_THEME);

const gridRef = ref();
const instance = ref<Grid>();

const props = defineProps<DataGridType>();

onMounted(() => {
  const gridOptions = {
    el: gridRef.value,
    columns: props.columns ?? [],
    data: cloneDeep(props.data) ?? [],
    bodyHeight: props.bodyHeight,
    columnOptions: props.columnOptions,
    keyColumnName: props.keyColumnName,
    width: props.width,
    heightResizable: props.heightResizable,
    minBodyHeight: props.minBodyHeight,
    rowHeight: props.rowHeight ?? 40,
    minRowHeight: props.minRowHeight,
    scrollX: props.scrollX,
    scrollY: props.scrollY,
    editingEvent: props.editingEvent,
    tabMode: props.tabMode,
    rowHeaders: props.rowHeaders,
    summary: props.summary,
    useClientSort: props.useClientSort,
    selectionUnit: props.selectionUnit,
    showDummyRows: props.showDummyRows,
    copyOptions: props.copyOptions,
    pageOptions: props.pageOptions,
    treeColumnOptions: props.treeColumnOptions,
    header: props.header,
    usageStatistics: false,
    disabled: props.disabled,
    draggable: props.draggable,
    contextMenu: props.contextMenu
  };

  if (props.onGridMounted) {
    gridOptions['onGridMounted'] = props.onGridMounted;
  }
  if (props.onGridUpdated) {
    gridOptions['onGridUpdated'] = props.onGridUpdated;
  }
  if (props.onGridBeforeDestroy) {
    gridOptions['onGridBeforeDestroy'] = props.onGridBeforeDestroy;
  }

  instance.value = new Grid(gridOptions);
});

const appendRow = (value: OptRow) => {
  instance.value?.appendRow(value);
};

const appendRows = (value: OptRow[]) => {
  instance.value?.appendRows(value);
};

const prependRow = (value: OptRow) => {
  instance.value?.prependRow(value);
};

const getCheckedRows = () => {
  return instance.value?.getCheckedRows();
};

const getData = () => {
  return instance.value?.getData();
};

const validate = () => {
  return instance.value?.validate();
};

const resetData = (data: OptRow[]) => {
  instance.value?.resetData(data);
};

const removeRow = (data: RowKey) => {
  instance.value?.removeRow(data);
};

const removeRows = (data: RowKey[]) => {
  instance.value?.removeRows(data);
};

const on = (eventName: GridEventName, eventFunction: (event) => void) => {
  instance.value?.on(eventName, eventFunction);
};

const off = (eventName: GridEventName) => {
  instance.value?.off(eventName);
};

defineExpose({
  appendRow,
  appendRows,
  prependRow,
  getCheckedRows,
  getData,
  validate,
  resetData,
  on,
  off,
  removeRow,
  removeRows
});

watch(
  () => props.data,
  (newValue) => {
    resetData(newValue);
  }
);
</script>

<template>
  <div ref="gridRef" />
</template>
