import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from "react";
import { Text, Box, Space, Title, useMantineTheme } from "@mantine/core";
import { Prism } from "@mantine/prism";
import { Table } from "../../../components";
import { PropsTableSnippet } from "./PropsTableSnippet";
import { TableInterfaceSnippet } from "./TableInterfaceSnippet";
import { propsTableData } from "./constants";
export var PropsTable = function () {
    var theme = useMantineTheme();
    var color = theme.colorScheme === "dark" ? theme.colors.blue[3] : theme.colors.blue[7];
    var PropNameRenderer = useCallback(function (value, isRequired) { return (_jsxs(Text, { sx: isRequired ? { color: color, fontWeight: 800 } : {}, children: [value, isRequired && "*"] })); }, [color]);
    var CodeValueRenderer = useCallback(function (value) { return (_jsx(Box, { ml: -16, my: -10, className: "snnipet-text snnipet-text-table", children: _jsx(Prism, { noCopy: true, language: "tsx", children: value !== null && value !== void 0 ? value : "" }) })); }, []);
    var columns = useMemo(function () { return [
        {
            accessorKey: "propName",
            header: "Prop Name",
            enableClickToCopy: true,
            Cell: function (_a) {
                var cell = _a.cell, row = _a.row;
                return PropNameRenderer(cell.getValue(), row.original.isRequired);
            },
        },
        {
            accessorKey: "type",
            header: "Type",
            Cell: function (_a) {
                var cell = _a.cell;
                return CodeValueRenderer(cell.getValue());
            },
        },
        {
            accessorKey: "defaultValue",
            header: "Default Value",
            Cell: function (_a) {
                var cell = _a.cell;
                return CodeValueRenderer(cell.getValue());
            },
        },
    ]; }, [CodeValueRenderer, PropNameRenderer]);
    return (_jsxs(Box, { mx: 32, children: [_jsx(Title, { order: 2, my: 20, color: color, children: "Table Props (Table API)" }), _jsx(Text, { size: "sm", color: color, my: 10, children: "* Required Props" }), _jsx(Table, { columns: columns, data: propsTableData, tableName: "Table Props", disableCrud: true, disablePagination: true, tableOptions: {
                    enableRowNumbers: true,
                    enableRowActions: false,
                }, renderDetailPanel: function (row) {
                    var _a;
                    return (_jsx(Text, { children: (_a = row.description) !== null && _a !== void 0 ? _a : "No Description Provided... Yet..." }));
                } }), _jsx(Space, { h: 20 }), _jsx(Title, { order: 4, my: 20, children: "Code Snippet" }), _jsx(TableInterfaceSnippet, {}), _jsx(PropsTableSnippet, {}), _jsx(Space, { h: 40 })] }));
};
