import { jsx as _jsx } from "react/jsx-runtime";
import { Box } from "@mantine/core";
import { Prism } from "@mantine/prism";
import { Analytics, EventAction, EventCategory } from "../../../utils";
var codeBlock = "\nimport { ColumnDef, Table } from \"react-mantine-table\";\n\nexport const UserTable = () => {\n  const [usersApiData, setUsersApiData] = useState<UserData[]>([]);\n\n  const fetchUsers = () => {} // fetch Users Data handler function\n\n  const CustomCellRenderer = useCallback(\n    (value: ReactNode) => <Text>{value}</Text>,\n    []\n  );\n\n  const columns = useMemo<ColumnDef<UserData>[]>(\n    () => [\n      {\n        accessorKey: \"name\",\n        header: \"Name\",\n      },\n      {\n        accessorKey: \"email\",\n        header: \"Email Id\",\n        enableClickToCopy: true,\n        Cell: ({ cell }) =>\n          CustomCellRenderer(cell.getValue<string>().toLowerCase()),\n      },\n      {\n        accessorKey: \"country\",\n        header: \"Country\",\n      },\n    ],\n    [CustomCellRenderer]\n  );\n\n  return (\n    // ------- Table ----------\n    <Table\n      columns={columns}\n      data={usersApiData}\n      tableName=\"User\"\n      disableCrud\n      disablePagination\n      hideOuterBorder\n      onDoubleClickRow={(row) =>\n        console.log(\"Custom Action Table | Double clicked row\", row)\n      }\n      tableOptions={{\n        enableRowSelection: true,\n        renderRowActionMenuItems: () => (\n          <Menu\n            withinPortal\n            position={\"bottom-end\"}\n            shadow=\"md\"\n            width={180}\n          >\n            <Menu.Target>\n              <ActionIcon>\n                <IconDotsVertical size=\"1.5rem\" />\n              </ActionIcon>\n            </Menu.Target>\n\n            <Menu.Dropdown>\n              <Menu.Item icon={<IconInfoCircle size={rem(18)} />}>\n                Menu Item 1\n              </Menu.Item>\n              <Menu.Item icon={<IconTrash size={rem(18)} />}>\n                Menu Item 2\n              </Menu.Item>\n              <Menu.Item onClick={open} icon={<IconEdit size={rem(18)} />}>\n                Edit Drawer\n              </Menu.Item>\n            </Menu.Dropdown>\n          </Menu>\n        ),\n        renderCustomTopToolbarComponent: () => (\n          <Group>\n            <Button onClick={open}>Add User Drawer</Button>\n            <Button variant=\"outline\">Change Role</Button>\n          </Group>\n        ),\n      }}\n    />\n  );\n};\n";
export var UserDemoSnippet = function () {
    var onCodeCopy = function () {
        Analytics.trackEvent({
            category: EventCategory.CustomUserTable,
            action: EventAction.CodeSnippetCopy,
        });
    };
    return (_jsx(Box, { className: "snnipet-text", children: _jsx(Prism, { withLineNumbers: true, language: "tsx", onCopy: onCodeCopy, children: codeBlock }) }));
};
