import { TableData } from "./table-data"
import { TableContextProps, TableProps } from "./interface"
import { ReactElement } from "react"
import {
  applyBorderedStyle,
  applyContainerStyle,
  applyTableStyle,
} from "./style"

import { TableContext } from "./table-context"
import { applyBoxStyle, deleteCssProps } from "../model/src"
import { Spin } from "../spin"
import { useTheme } from "@mui/material"


export function RenderDirectTable<D extends TableData, TValue>(
  props: TableProps<D, TValue>,
): ReactElement {
  const {
    size = "medium",
    tableLayout = "auto",
    // columns,
    // data,
    bordered,
    borderedCell,
    striped,
    children,
    // disableSortBy,
    // pinedHeader,
    hoverable,
    align = "left",
    showFooter = true,
    showHeader = true,
    loading = false,
    ...otherProps
  } = props

  const contextProps = {
    align,
    borderedCell,
    striped,
    size,
    showHeader,
    hoverable,
    showFooter,
  } as TableContextProps
 const theme = useTheme()
  return (
    <div
      css={[
        applyContainerStyle(),
        applyBoxStyle(props,theme),
        applyBorderedStyle(bordered),
      ]}
    >
      <Spin loading={loading}>
        <TableContext.Provider value={contextProps}>
          <table
            css={applyTableStyle(tableLayout)}
            {...deleteCssProps(otherProps)}
          >
            {children}
          </table>
        </TableContext.Provider>
      </Spin>
    </div>
  )
}
