import { __awaiter, __generator } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Box, Title, Space, Text, ActionIcon, Menu, rem, Button, Group, useMantineTheme, Drawer, Stack, TextInput, Select, } from "@mantine/core";
import axios from "axios";
import { Table } from "../../../components";
import { IconDotsVertical, IconEdit, IconInfoCircle, IconTrash, } from "@tabler/icons-react";
import { FeaturesList } from "../components";
import { UserDemoSnippet } from "./UserDemoSnippet";
import { useDisclosure } from "@mantine/hooks";
var BASE_URL = "https://64b96dea79b7c9def6c107e2.mockapi.io/api/v1/users";
var apiClient = axios.create({ baseURL: BASE_URL });
var features = [
    "Disable CRUD Operations by Prop",
    "Render Custom Row Actions Menu",
    "Render Custom Top Toolbar buttons",
    "Borderless Table Layout",
    "Show/Hide Columns",
    "Disable Pagination",
    "Custom Drawer to Add/Update Data",
];
export var UsersDemoTable = function () {
    var theme = useMantineTheme();
    var _a = useState([]), usersApiData = _a[0], setUsersApiData = _a[1];
    var _b = useDisclosure(false), opened = _b[0], _c = _b[1], open = _c.open, close = _c.close;
    var fetchUsersApi = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
        var data;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, apiClient.get("/")];
                case 1:
                    data = (_a.sent()).data;
                    if (data) {
                        setUsersApiData(data);
                    }
                    return [2 /*return*/];
            }
        });
    }); }, []);
    useEffect(function () {
        fetchUsersApi();
    }, [fetchUsersApi]);
    var CustomCellRenderer = useCallback(function (value) { return _jsx(Text, { children: value }); }, []);
    var columns = useMemo(function () { return [
        {
            accessorKey: "name",
            header: "Name",
        },
        {
            accessorKey: "email",
            header: "Email Id",
            enableClickToCopy: true,
            Cell: function (_a) {
                var cell = _a.cell;
                return CustomCellRenderer(cell.getValue().toLowerCase());
            },
        },
        {
            accessorKey: "country",
            header: "Country",
        },
    ]; }, [CustomCellRenderer]);
    var EditDrawer = useMemo(function () { return (_jsx(Drawer, { position: "right", opened: opened, onClose: close, title: "Add User (Custom Drawer)", children: _jsxs(Stack, { children: [_jsx(TextInput, { label: "Name", placeholder: "John Doe", required: true, mt: "md" }), _jsx(TextInput, { label: "Email", placeholder: "your@email.com", required: true }), _jsx(Select, { label: "Country", placeholder: "Select your country", data: [
                        "India",
                        "US",
                        "Australia",
                        "New Zealand",
                        "Canada",
                        "Other",
                    ] }), _jsxs(Group, { mt: "md", children: [_jsx(Button, { onClick: close, children: "Submit" }), _jsx(Button, { variant: "outline", onClick: close, children: "Cancel" })] })] }) })); }, [close, opened]);
    return (_jsxs(Box, { mx: 32, children: [_jsx(Title, { order: 2, my: 20, color: theme.colorScheme === "dark"
                    ? theme.colors.blue[3]
                    : theme.colors.blue[7], children: "Users Table | Custom Options" }), _jsx(Title, { order: 4, my: 10, children: "Features" }), _jsx(FeaturesList, { features: features }), _jsx(Box, { mx: -56, children: _jsx(Table, { columns: columns, data: usersApiData, tableName: "User", disableCrud: true, disablePagination: true, hideOuterBorder: true, onDoubleClickRow: function (row) {
                        return console.log("Custom Action Table | Double clicked row", row);
                    }, tableOptions: {
                        enableRowSelection: true,
                        renderRowActionMenuItems: function () { return (_jsxs(Menu, { withinPortal: true, position: "bottom-end", shadow: "md", width: 180, children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { children: _jsx(IconDotsVertical, { size: "1.5rem" }) }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { icon: _jsx(IconInfoCircle, { size: rem(18) }), children: "Menu Item 1" }), _jsx(Menu.Item, { icon: _jsx(IconTrash, { size: rem(18) }), children: "Menu Item 2" }), _jsx(Menu.Item, { onClick: open, icon: _jsx(IconEdit, { size: rem(18) }), children: "Edit Drawer" })] })] })); },
                        renderCustomTopToolbarComponent: function () { return (_jsxs(Group, { children: [_jsx(Button, { onClick: open, children: "Add User Drawer" }), _jsx(Button, { variant: "outline", children: "Change Role" })] })); },
                    } }) }), _jsx(Space, { h: 20 }), _jsx(Title, { order: 4, my: 20, children: "Code Snippet" }), _jsx(UserDemoSnippet, {}), _jsx(Space, { h: 40 }), EditDrawer] }));
};
