import { jsx as _jsx } from "react/jsx-runtime";
import { Box } from "@mantine/core";
import { Prism } from "@mantine/prism";
import { Analytics, EventAction, EventCategory } from "../../../utils";
// import { generatedHighlightedLines } from "../utils";
var codeBlock = "\n\nimport { ColumnDef, Table } from \"react-mantine-table\";\n\nexport const ProductTable = () => {\n  const [productsApiData, setProductsApiData] = useState<ProductData[]>([]);\n\n  // product data state used in edit row\n  const [productData, setProductData] = useState({} as ProductData);\n\n  // loading state\n  const [isLoading, setIsLoading] = useState(false);\n\n  const fetchProducts = () => {} // fetch Products Data handler function\n  const updateProduct = () => {} // update Product handler function\n  const createProduct = () => {} // create Product handler function\n  const deleteProduct = () => {} // delete Product handler function\n\n  const columns = useMemo<ColumnDef<ProductData>[]>(\n    () => [\n      {\n        accessorKey: \"title\",\n        header: \"Product Name\",\n        mantineEditTextInputProps: {\n          withAsterisk: true,\n        },\n        enableClickToCopy: true,\n      },\n      {\n        accessorKey: \"brand\",\n        header: \"Brand\",\n        maxSize: 140,\n      },\n      {\n        accessorKey: \"description\",\n        header: \"Description\",\n        Cell: ({ cell }) =>\n          CustomCellRenderer(cell.getValue<string>().slice(0, 20) + \"...\"),\n        Edit: DescriptionEditComponent,\n      },\n      {\n        accessorKey: \"price\", //normal accessorKey\n        aggregationFn: \"sum\",\n        header: \"Price\",\n        filterVariant: \"range-slider\",\n        mantineFilterRangeSliderProps: {\n          showLabelOnHover: true,\n          min: Math.min(...productsApiData.map((product) => product.price)),\n          max: Math.max(...productsApiData.map((product) => product.price)),\n        },\n        mantineEditTextInputProps: {\n          withAsterisk: true,\n        },\n        Cell: ({ cell }) =>\n          CustomCellRenderer(formatCurrency(cell.getValue<number>())),\n        Footer: AggregatedFooterComponent,\n      },\n      {\n        accessorKey: \"rating\",\n        header: \"Rating (out of 5)\",\n      },\n      {\n        accessorKey: \"category\",\n        header: \"Category\",\n        editVariant: \"select\",\n        mantineEditSelectProps: {\n          data: categoryList,\n          withAsterisk: true,\n        },\n        filterVariant: \"select\",\n        mantineFilterSelectProps: {\n          data: categoryList,\n        },\n        Cell: ({ cell }) =>\n          CustomCellRenderer(slugToSentenceCase(cell.getValue<string>())),\n      },\n    ],\n    [\n      DescriptionEditComponent,\n      productsApiData,\n      AggregatedFooterComponent,\n      categoryList,\n      CustomCellRenderer,\n      aggregatedData.avgRating,\n    ]\n  );\n\n  // Customize your table with various options\n  const tableOptions = {\n    enableRowActions: true, // enables row actions\n    enableRowSelection: true, // enables row selection\n    enableColumnActions: true, \n    enableExpanding: true, // enables rows expanding\n    enableRowNumbers: true,\n    enableColumnDragging: true, // enables column dragging & ordering\n    enableColumnOrdering: true,\n    enableColumnResizing: true,\n    enableRowDragging: true, // enables row dragging & ordering\n    enableRowOrdering: true,\n  };\n\n  return (\n    // ------- Table ----------\n    <Table\n      columns={columns}\n      data={productsApiData}\n      tableName=\"Product\"\n      isLoading={isLoading}\n      crudOptions={{\n          tableRowObject: productData,\n          setTableRowObject: setProductData,\n          onCreateRow: addProductApi,\n          onEditSaveRow: updatedProductApi,\n          onDeleteRow: deleteProductApi,\n      }}\n      rowActionsPosition=\"start\"\n      renderDetailPanel={(row) => (\n        <Text>{row.description || \"No Description Provided... Yet...\"}</Text>\n      )}\n      tableOptions={tableOptions}\n    />\n  );\n};\n\n ";
export var ProductTableSnippet = function () {
    var onCodeCopy = function () {
        Analytics.trackEvent({
            category: EventCategory.ProductsTable,
            action: EventAction.CodeSnippetCopy,
        });
    };
    return (_jsx(Box, { className: "snnipet-text", children: _jsx(Prism, { withLineNumbers: true, language: "tsx", onCopy: onCodeCopy, children: codeBlock }) }));
};
