"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableExpandable = exports.Default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const moment_1 = __importDefault(require("moment"));
const Table_1 = require("./Table");
const Text_1 = require("../Text");
const Button_1 = require("../Button");
const Box_1 = require("../Box");
const Icon_1 = require("../Icon");
const DatePicker_1 = require("../DatePicker");
const Input_1 = require("../Input");
const Select_1 = require("../Select");
const icons_1 = require("../../theme/icons");
exports.default = {
    title: 'Polyblocks/Table',
    component: Table_1.Table,
};
const randomDate = (start, end) => new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
const initialData = (count) => Array.from({ length: count }).map((e, i) => ({
    did: `0x0000000000${i}`,
    expiry: randomDate(new Date(), new Date(2022, 11, 20)),
    amount: (Math.random() * 1000 * i).toFixed(2),
    accredited: Math.random() >= 0.5,
    subRow: `Lorem ipsum dolor sitamet... ${i}`,
}));
const Default = () => {
    const [data, setData] = (0, react_1.useState)(initialData(15));
    const columns = (0, react_1.useMemo)(() => [
        {
            Header: 'Claims',
            columns: [
                {
                    Header: 'Identity (DID)',
                    accessor: 'did',
                    footer: (index) => index === 4 ? ((0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ variant: "span", format: "b3", color: "red.0" }, { children: "This identity (DID) is invalid. Please remove or edit the address to continue" }), void 0)) : null,
                    editor: Input_1.Input,
                    editorProps: {
                        blurOnEnterKeyPress: true,
                    },
                },
                {
                    Header: 'Expiry',
                    accessor: 'expiry',
                    formatter: (date) => date === null ? 'No expiry' : (0, moment_1.default)(date).format('MM/DD/YYYY'),
                    editor: DatePicker_1.DatePicker,
                    editorProps: {
                        noExpiryOption: true,
                    },
                },
                {
                    Header: 'Amount',
                    accessor: 'amount',
                    formatter: (amount) => Number(amount).toLocaleString(),
                    editor: Input_1.Input,
                    editorProps: {
                        blurOnEnterKeyPress: true,
                    },
                },
                {
                    Header: 'Accredited',
                    accessor: 'accredited',
                    formatter: (state) => state ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icons_1.polyIcons.CheckboxMarkedCircle, size: "22px", color: "success" }, void 0)) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icons_1.polyIcons.MinusCircle, size: "26px", color: "gray3", margin: "0 0 0 -2px" }, void 0)),
                    editor: Select_1.Select,
                    editorProps: {
                        options: [
                            {
                                label: 'Yes',
                                value: true,
                                icon: {
                                    variant: 'basic',
                                    icon: icons_1.polyIcons.CheckboxMarkedCircle,
                                    color: 'success',
                                    margin: '0 0 0 5px',
                                },
                            },
                            {
                                label: 'No',
                                value: false,
                                icon: {
                                    variant: 'basic',
                                    icon: icons_1.polyIcons.MinusCircle,
                                    size: '26px',
                                    margin: '0 0 0 3px',
                                },
                            },
                        ],
                        styles: {
                            menu: (provided) => (Object.assign(Object.assign({}, provided), { width: 120 })),
                        },
                    },
                },
            ],
        },
    ], [data]);
    const subRow = (rowData) => {
        return (0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ variant: "basic" }, { children: rowData.subRow }), void 0);
    };
    const batchDelete = (selectedData) => {
        const selectedDids = selectedData.map((entry) => entry.did);
        setData(data.filter((entry) => !selectedDids.includes(entry.did)));
    };
    const batchActions = [
        {
            icon: icons_1.polyIcons.DeleteOutline,
            label: 'Delete {0} item{s}',
            buttonProps: { variant: 'tertiary' },
            needsSelection: true,
            click: batchDelete,
        },
        {
            label: 'Custom Action',
            condition: data.length < 13,
            click: () => {
                alert('Clicked!'); // eslint-disable-line no-alert
            },
        },
    ];
    const pageSizes = [5, 10, 20, 30];
    const title = ((0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ variant: "span", format: "b2m", color: "gray.1" }, { children: "Table Demo" }), void 0));
    const rowActions = [
        {
            id: 'add',
            Content: Button_1.Button,
            ContentProps: { variant: 'primary', size: 's' },
            action: (rowData, rowIndex) => {
                alert('Row Action ' + rowIndex); // eslint-disable-line no-alert
            },
            ContentChildren: 'Add',
            onlyShowOnHover: true,
            disabledTooltip: (rowData) => {
                console.log('-- rowData =', rowData); // eslint-disable-line no-console
                return 'This button is disabled.';
            },
            disabled: () => true,
        },
        {
            id: 'delete',
            Content: Button_1.Button,
            ContentProps: {
                variant: 'inline',
                width: '20px',
            },
            ContentChildren: ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icons_1.polyIcons.DeleteOutline, size: "20px", color: "gray2" }, void 0)),
            action: (rowData) => {
                setData(data.filter((entry) => entry.did !== rowData.did));
            },
            onlyShowOnHover: true,
        },
    ];
    const [selectedRowIndices, setSelectedRowIndices] = (0, react_1.useState)([1]);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Selected indices: ", JSON.stringify(selectedRowIndices), (0, jsx_runtime_1.jsx)(Table_1.Table, { variant: "raw", title: title, columns: columns, data: data, updateData: setData, batchActions: batchActions, rowActions: rowActions, subRow: subRow, sortable: true, selectable: true, pageSize: 5, pageSizes: pageSizes, canSkipPage: true, initialSelectedRowIndices: selectedRowIndices, onSelect: (selectedData) => {
                    setSelectedRowIndices(selectedData.map((entry) => data.indexOf(entry)));
                }, empty: {
                    icon: ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "circle", icon: icons_1.polyIcons.Coins, size: "48px", bg: "gray4", color: "gray3" }, void 0)),
                    copy: ((0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ variant: "span", format: "b3", margin: "m 0 0 0" }, { children: "No Item Exist" }), void 0)),
                } }, void 0)] }, void 0));
};
exports.Default = Default;
const tableExpandableInitialDataGenerator = (count) => Array.from({ length: count }).map((e, i) => ({
    did: [1, 2].includes(i) ? '' : `0x0000000000${i}`,
    provider: `0x0000000000${i}`,
    buyLockup: '30 Sep, 2020',
    accredited: Math.random() >= 0.5,
    subRow: `Lorem ipsum dolor sitamet... ${i}`,
}));
const tableExpandableInitialData = tableExpandableInitialDataGenerator(10);
const TableExpandable = () => {
    const [pageStart] = (0, react_1.useState)(0);
    const pageSize = 5;
    const [data, setData] = (0, react_1.useState)({
        data: [],
        count: 0,
        next: null,
    });
    const fetchData = ({ start }) => {
        start = Math.min(start, tableExpandableInitialData.length - pageSize - 1);
        const newData = {
            data: tableExpandableInitialData.slice(start, start + pageSize),
            count: 10,
            next: start >= tableExpandableInitialData.length - 1 ? null : true,
        };
        setData(newData);
    };
    (0, react_1.useEffect)(() => {
        fetchData({ start: 0 });
    }, []);
    const getCustomHeaderProperties = () => ({
        borderBottom: `2px solid ${({ theme }) => theme.COLOR.gray4}`,
    });
    const getCustomRowProperties = (index) => [0, 1].includes(index)
        ? {
            borderBottom: 'none',
        }
        : {
            borderBottom: `2px solid ${({ theme }) => theme.COLOR.gray4}`,
        };
    const getDefaultCellProperties = () => ({
        borderBottom: `2px solid ${({ theme }) => theme.COLOR.gray4}`,
    });
    const columns = (0, react_1.useMemo)(() => [
        {
            Header: 'Claims',
            columns: [
                {
                    Header: 'Target Identity',
                    accessor: 'did',
                    getCustomCellProperties: () => ({
                        borderBottom: 'none',
                        borderRight: `2px solid ${({ theme }) => theme.COLOR.gray4}`,
                    }),
                    getCustomHeaderProperties: () => ({
                        borderRight: `2px solid ${({ theme }) => theme.COLOR.gray4}`,
                    }),
                },
                {
                    Header: 'Provider',
                    accessor: 'provider',
                },
                {
                    Header: 'Buy Lockup',
                    accessor: 'buyLockup',
                },
                {
                    Header: 'Accredited',
                    accessor: 'accredited',
                    formatter: (state) => state ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icons_1.polyIcons.CheckboxMarkedCircle, size: "22px", color: "success" }, void 0)) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icons_1.polyIcons.MinusCircle, size: "26px", color: "gray3", margin: "0 0 0 -2px" }, void 0)),
                },
            ],
        },
    ], []);
    const batchActions = [
        {
            icon: icons_1.polyIcons.DeleteOutline,
            label: 'Delete {0} item{s}',
            buttonProps: { variant: 'tertiary' },
            needsSelection: true,
            click: () => { },
        },
    ];
    const pageSizes = [5, 10, 20, 30];
    const title = ((0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ variant: "span", format: "b3" }, { children: "Table Expandable Demo" }), void 0));
    const rowActions = [
        {
            id: 'delete',
            Content: Button_1.Button,
            ContentProps: {
                variant: 'inline',
                width: '20px',
            },
            ContentChildren: ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icons_1.polyIcons.DeleteOutline, size: "20px", color: "gray2" }, void 0)),
            action: () => { },
            onlyShowOnHover: true,
        },
    ];
    return ((0, jsx_runtime_1.jsx)(Table_1.Table, { variant: "raw", title: title, columns: columns, data: data, fetchData: fetchData, pageStart: pageStart, updateData: setData, batchActions: batchActions, rowActions: rowActions, sortable: true, selectable: true, pageSize: pageSize, pageSizes: pageSizes, empty: {
            icon: ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { variant: "basic", icon: icons_1.polyIcons.Coins, size: "48px", bg: "gray4", color: "gray3" }, void 0)),
            copy: ((0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ variant: "span", format: "b3", margin: "m 0 0 0" }, { children: "No Item Exist" }), void 0)),
        }, getCustomHeaderDefaultColumnProperties: getCustomHeaderProperties, getDefaultCellProperties: getDefaultCellProperties, getCustomRowProperties: getCustomRowProperties, rowsIndexesCheckboxesDisabled: [0, 3, 5], rowsIndexesCheckboxesHidden: [1, 2], paginationLabel: "Identities per page", selectionRowCellStyle: {
            borderBottom: 'none',
        }, setPageSize: () => { } }, void 0));
};
exports.TableExpandable = TableExpandable;
//# sourceMappingURL=Table.stories.js.map