<script setup lang="ts">
import { ref } from 'vue'
import type { UiGridColumn } from './adapter/contracts'
import { KsDataGrid, KsPaginator, SkeletonLoader, EmptyStatePlaceholder } from './components'


const props = withDefaults(defineProps<{
  rows: unknown[]
  columns: UiGridColumn[]
  loading?: boolean
  emptyMessage?: string
  height?: string
  page?: number
  pageSize?: number
  total?: number
}>(), { loading: false, emptyMessage: '검색 조건에 해당하거나 조회된 데이터가 없습니다.', height: '100%' })

const emit = defineEmits<{ pageChange: [value: { page: number; pageSize: number }] }>()

const gridRef = ref<{ focusRow: (rowIndex: number, colKey?: string) => void; redrawRows: () => void } | null>(null)

function focusRow(rowIndex: number, colKey?: string): void {
  gridRef.value?.focusRow(rowIndex, colKey)
}

function redrawRows(): void {
  gridRef.value?.redrawRows()
}

defineExpose({ focusRow, redrawRows, gridRef })

</script>

<template>
  <section class="ks-grid-shell-section" :style="{ height: props.height ?? '100%' }" aria-label="데이터 표" :aria-busy="loading">

    <SkeletonLoader v-if="loading" type="table" :rows="6" />
    <KsDataGrid v-else ref="gridRef" :rows="rows" :columns="columns" :height="props.height" />

    <KsPaginator
      v-if="props.page !== undefined && props.pageSize !== undefined && props.total !== undefined"
      :page="props.page"
      :page-size="props.pageSize"
      :total="props.total"
      @page-change="emit('pageChange', $event)"
    />
  </section>
</template>

<style scoped>
.ks-grid-shell-section { height: 100%; display: flex; flex-direction: column; flex: 1; min-height: 0; }
</style>
