import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { mockData } from '../../table/mock-data.js';
import { ObjectSetTable } from '../../table/object-set-table.js';
import { Button } from '../../../ui/components/button/button.js';
import { Icon } from '../../../ui/components/icon/icon.js';
const ColumnVisibilityExample = () => {
    const [hiddenColumns, setHiddenColumns] = useState(['email']);
    const toggleColumn = (field) => {
        setHiddenColumns((prev) => (prev.includes(field) ? prev.filter((f) => f !== field) : [...prev, field]));
    };
    const columns = useMemo(() => [
        {
            field: 'firstName',
            title: 'Name',
            width: 140,
            hidden: hiddenColumns.includes('firstName'),
        },
        {
            field: 'email',
            title: 'Email',
            width: 200,
            hidden: hiddenColumns.includes('email'),
        },
        {
            field: 'status',
            title: 'Status',
            width: 120,
            hidden: hiddenColumns.includes('status'),
        },
        {
            field: 'payment',
            title: 'Payment',
            width: 120,
            type: 'number',
            hidden: hiddenColumns.includes('payment'),
            align: 'right',
        },
        {
            field: 'isActive',
            title: 'Active',
            width: 80,
            hidden: hiddenColumns.includes('isActive'),
        },
    ], [hiddenColumns]);
    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-md", children: [_jsx("h3", { className: "text-sm font-medium text-blue-900 mb-2", children: "Column Visibility Demo" }), _jsx("p", { className: "text-sm text-blue-700 mb-3", children: "Toggle column visibility to show/hide columns dynamically. The table maintains consistent column indices and API functionality even when columns are hidden." }), _jsx("div", { className: "flex flex-wrap gap-2", children: columns.map((option) => (_jsxs(Button, { variant: hiddenColumns.includes(option.field) ? 'secondary' : 'default', size: "sm", onClick: () => {
                                toggleColumn(option.field);
                            }, className: "flex items-center gap-2", children: [_jsx(Icon, { name: hiddenColumns.includes(option.field) ? 'Show' : 'Hide', size: 14 }), option.title] }, option.field))) })] }), _jsx(ObjectSetTable, { columns: columns, data: mockData.slice(0, 6), allowRowSelection: true, showRowNumbers: true })] }));
};
export default ColumnVisibilityExample;
//# sourceMappingURL=column-visibility.js.map