import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes, onMounted } from 'vue'

import '@/components/UTable/table.scss'

export const makeUTableProps = propsFactory(
  {
    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'UTable'
)

export type UTableProps = ExtractPropTypes<typeof makeUTableProps>

export type UTableSlots = {
  header: never
  tableHeader: never
  tableContent: never
  footer: never
}

export const UTable = genericComponent<UTableSlots>()({
  name: 'UTable',

  props: makeUTableProps(),

  emits: {
    //
  },

  setup(props, { emit, slots }) {
    return () => (
      <div
        class={[
          'overflow-hidden border rounded-lg border-gray-300',
          slots.footer ? '' : 'table-without-footer',
        ]}
      >
        {slots.header?.()}
        <div class="table table-fixed" style="width: 100%">
          <div class="table-header-group">{slots.tableHeader?.()}</div>
          <div class="table-row-group">{slots.tableContent?.()}</div>
        </div>
        {slots.footer?.()}
      </div>
    )
  },
})

export type UTable = InstanceType<typeof UTable>