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 = "\n\nimport { ColumnDef, Table } from \"react-mantine-table\";\n\nexport const UserTable = () => {\n  const [usersApiData, setUsersApiData] = useState<UserData[]>([]);\n\n  // user data state used in edit row\n  const [userData, setUserData] = useState({} as UserData);\n\n  // loading state\n  const [isLoading, setIsLoading] = useState(false);\n\n  // table config hook\n  const { paginationData, setTableConfig } = useTableConfig<UserData>();\n\n  // fetch Users Data handler function\n  const fetchUsersApi = useCallback(async () => {\n    const { pageIndex, pageSize } = paginationData;\n    setIsLoading(true);\n    const { data }: AxiosResponse<UserData[]> = await apiClient.get(\n      `/?page=${pageIndex}&limit=${pageSize}`   // using pagination data\n    );\n\n    setUsersApiData(data);\n    setIsLoading(false);\n  }, [paginationData]);\n  \n  const updateUser = () => {} // update User handler function\n  const createUser = () => {} // create User handler function\n  const deleteUser = () => {} // delete User 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        accessorKey: \"dob\",\n        header: \"Birth Date\",\n        Cell: ({ cell }) =>\n          CustomCellRenderer(\n            dayjs(cell.getValue<string>()).format(\"DD MMM YYYY\")\n          ),\n        Edit: DOBEditComponent,\n      },\n      {\n        accessorKey: \"isPublisher\",\n        header: \"Is Publisher\",\n        filterVariant: \"checkbox\",\n        mantineFilterCheckboxProps: {\n          size: \"sm\",\n          label: \"Is Publisher\",\n        },\n        Cell: PublisherRenderComponent,\n        Edit: PublisherEditComponent,\n      },\n    ],\n    [\n      CustomCellRenderer,\n      DOBEditComponent,\n      PublisherEditComponent,\n      PublisherRenderComponent,\n    ]\n  );\n\n  return (\n    // ------- Table ----------\n    <Table\n      columns={columns}\n      data={usersApiData}\n      tableName=\"User\"\n      isLoading={isLoading}\n      crudOptions={{\n          tableRowObject: userData,\n          setTableRowObject: setUserData,\n          onCreateRow: addUserApi,\n          onEditSaveRow: updatedUserApi,\n          onDeleteRow: deleteUserApi,\n      }}\n      tableOptions={{\n        enableRowSelection: true,\n        columnFilterDisplayMode: \"popover\",\n        state: {\n            showProgressBars: isLoading,\n        },\n      }}\n      totalRecords={totalRecords}\n      setTableConfig={setTableConfig}\n      rowActionMenuItems={[\n        {\n          name: \"View User\",\n          icon: <IconInfoCircle />,\n          onClick: (row) => alert(\"View User | \" + row.name),\n        },\n        {\n          name: \"Change Role\",\n          icon: <IconUserPlus />,\n          onClick: (row) => alert(\"Change Row | \" + row.name),\n        },\n      ]}\n    />\n  );\n};\n\n ";
export var UserTableSnippet = function () {
    var onCodeCopy = function () {
        Analytics.trackEvent({
            category: EventCategory.UsersTable,
            action: EventAction.CodeSnippetCopy,
        });
    };
    return (_jsx(Box, { className: "snnipet-text", children: _jsx(Prism, { withLineNumbers: true, language: "tsx", onCopy: onCodeCopy, children: codeBlock }) }));
};
