import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Space, Title, useMantineTheme } from "@mantine/core";
import { Prism } from "@mantine/prism";
import { Analytics, EventAction, EventCategory } from "../../../utils";
var tableCodeBlock = "\n\nimport { ColumnDef, Table } from \"react-mantine-table\";\n\nexport const PropsTable = () => {\n\n  const PropNameRenderer = useCallback(\n    (value: string, isRequired?: boolean) => (\n      <Text sx={isRequired ? { color, fontWeight: 800 } : {}}>\n        {value}\n        {isRequired && \"*\"}\n      </Text>\n    ),\n    [color]\n  );\n\n  const CodeValueRenderer = useCallback(\n    (value: string) => (\n      <Box ml={-16} my={-10} className=\"snnipet-text snnipet-text-table\">\n        <Prism noCopy language=\"tsx\">\n          {value ?? \"\"}\n        </Prism>\n      </Box>\n    ),\n    []\n  );\n\n  const columns = useMemo<ColumnDef<PropsTableData>[]>(\n    () => [\n      {\n        accessorKey: \"propName\",\n        header: \"Prop Name\",\n        enableClickToCopy: true,\n        Cell: ({ cell, row }) =>\n          PropNameRenderer(cell.getValue<string>(), row.original.isRequired),\n      },\n      {\n        accessorKey: \"type\",\n        header: \"Type\",\n        Cell: ({ cell }) => CodeValueRenderer(cell.getValue<string>()),\n      },\n      {\n        accessorKey: \"defaultValue\",\n        header: \"Default Value\",\n        Cell: ({ cell }) => CodeValueRenderer(cell.getValue<string>()),\n      },\n    ],\n    [CodeValueRenderer, PropNameRenderer]\n  );\n\n  return (\n    // ------- Table ----------\n    <Table\n        columns={columns}\n        data={propsTableData}\n        tableName=\"Table Props\"\n        disableCrud\n        disablePagination\n        tableOptions={{\n          enableRowNumbers: true,\n          enableRowActions: false,\n        }}\n        renderDetailPanel={(row) => (\n          <Text>{row.description ?? \"No Description Provided... Yet...\"}</Text>\n        )}\n      />\n  )\n\n  \n\n\n ";
export var PropsTableSnippet = function () {
    var theme = useMantineTheme();
    var onCodeCopy = function () {
        Analytics.trackEvent({
            category: EventCategory.TableProps,
            action: EventAction.CodeSnippetCopy,
        });
    };
    return (_jsxs(Box, { mx: 32, children: [_jsx(Title, { order: 3, my: 20, color: theme.colorScheme === "dark"
                    ? theme.colors.blue[3]
                    : theme.colors.blue[7], children: "Table Code" }), _jsx(Box, { className: "snnipet-text", my: 32, mr: 48, children: _jsx(Prism, { withLineNumbers: true, language: "tsx", onCopy: onCodeCopy, children: tableCodeBlock }) }), _jsx(Space, { h: 20 })] }));
};
