// Tremor Table [v0.0.3]

import React from "react"

import { cx } from "../../lib/utils"

const TableRoot = React.forwardRef<
    HTMLDivElement,
    React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, forwardedRef) => (
    <div
        ref={forwardedRef}
    // Activate if table is used in a float environment
    // className="flow-root"
    >
        <div
            // make table scrollable on mobile
            className={cx("onvo-w-full onvo-overflow-auto onvo-whitespace-nowrap", className)}
            {...props}
        >
            {children}
        </div>
    </div>
))

TableRoot.displayName = "TableRoot"

const Table = React.forwardRef<
    HTMLTableElement,
    React.TableHTMLAttributes<HTMLTableElement>
>(({ className, ...props }, forwardedRef) => (
    <table
        ref={forwardedRef}
        tremor-id="tremor-raw"
        className={cx(
            // base
            "onvo-w-full onvo-caption-bottom onvo-border-b",
            // border color
            "onvo-border-gray-200 dark:onvo-border-gray-800",
            className,
        )}
        {...props}
    />
))

Table.displayName = "Table"

const TableHead = React.forwardRef<
    HTMLTableSectionElement,
    React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, forwardedRef) => (
    <thead ref={forwardedRef} className={cx(className)} {...props} />
))

TableHead.displayName = "TableHead"

const TableHeaderCell = React.forwardRef<
    HTMLTableCellElement,
    React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, forwardedRef) => (
    <th
        ref={forwardedRef}
        className={cx(
            // base
            "onvo-border-b onvo-px-4 onvo-py-3.5 onvo-text-left onvo-text-sm onvo-font-semibold",
            // text color
            "onvo-text-gray-900 dark:onvo-text-gray-50",
            // border color
            "onvo-border-gray-200 dark:onvo-border-gray-800",
            className,
        )}
        {...props}
    />
))

TableHeaderCell.displayName = "TableHeaderCell"

const TableBody = React.forwardRef<
    HTMLTableSectionElement,
    React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, forwardedRef) => (
    <tbody
        ref={forwardedRef}
        className={cx(
            // base
            "onvo-divide-y",
            // divide color
            "onvo-divide-gray-200 dark:onvo-divide-gray-800",
            className,
        )}
        {...props}
    />
))

TableBody.displayName = "TableBody"

const TableRow = React.forwardRef<
    HTMLTableRowElement,
    React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, forwardedRef) => (
    <tr
        ref={forwardedRef}
        className={cx(
            "[&_td:last-child]:onvo-pr-4 [&_th:last-child]:onvo-pr-4",
            "[&_td:first-child]:onvo-pl-4 [&_th:first-child]:onvo-pl-4",
            className,
        )}
        {...props}
    />
))

TableRow.displayName = "TableRow"

const TableCell = React.forwardRef<
    HTMLTableCellElement,
    React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, forwardedRef) => (
    <td
        ref={forwardedRef}
        className={cx(
            // base
            "onvo-p-4 onvo-text-sm",
            // text color
            "onvo-text-gray-600 dark:onvo-text-gray-400",
            className,
        )}
        {...props}
    />
))

TableCell.displayName = "TableCell"

const TableFoot = React.forwardRef<
    HTMLTableSectionElement,
    React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, forwardedRef) => {
    return (
        <tfoot
            ref={forwardedRef}
            className={cx(
                // base
                "onvo-border-t onvo-text-left onvo-font-medium",
                // text color
                "onvo-text-gray-900 dark:onvo-text-gray-50",
                // border color
                "onvo-border-gray-200 dark:onvo-border-gray-800",
                className,
            )}
            {...props}
        />
    )
})

TableFoot.displayName = "TableFoot"

const TableCaption = React.forwardRef<
    HTMLTableCaptionElement,
    React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, forwardedRef) => (
    <caption
        ref={forwardedRef}
        className={cx(
            // base
            "onvo-mt-3 onvo-px-3 onvo-text-center onvo-text-sm",
            // text color
            "onvo-text-gray-500 dark:onvo-text-gray-500",
            className,
        )}
        {...props}
    />
))

TableCaption.displayName = "TableCaption"

export {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableFoot,
    TableHead,
    TableHeaderCell,
    TableRoot,
    TableRow,
}