var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useEffect, useRef, useState } from "react";
import { cn } from "@utils";
import { ADPIcon, iconList } from "../adpIcon/adpIcon";
import { Button } from "../button/button";
import { Toggle } from "../toggle/toggle";
const prepareData = (columns, hideColumn = true) => {
    var _a, _b;
    return (_b = (_a = columns === null || columns === void 0 ? void 0 : columns.filter((field) => (field === null || field === void 0 ? void 0 : field.id) !== "select" && (field === null || field === void 0 ? void 0 : field.hideColPreference) !== hideColumn)) === null || _a === void 0 ? void 0 : _a.map((item) => {
        var _a, _b;
        const { header, selected } = item, rest = __rest(item, ["header", "selected"]);
        return Object.assign({ header: typeof header === "function" ? (_b = (_a = header()) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children : header, selected: selected === undefined || selected !== false }, rest);
    })) === null || _b === void 0 ? void 0 : _b.sort((a, b) => { var _a, _b; return Number((_a = b === null || b === void 0 ? void 0 : b.fixed) !== null && _a !== void 0 ? _a : false) - Number((_b = a === null || a === void 0 ? void 0 : a.fixed) !== null && _b !== void 0 ? _b : false); });
};
export const DataTableColumnSettings = ({ columns, setColumns, isOpen, onClose }) => {
    var _a;
    const [settingItem, setSettingsItem] = useState(prepareData(columns));
    const dragItemRef = useRef({ index: -1 });
    const dragOverItemRef = useRef({ index: -1 });
    useEffect(() => {
        setSettingsItem(prepareData(columns));
    }, [columns, setSettingsItem]);
    const handleDrop = (event) => {
        var _a;
        event.stopPropagation();
        const listCopy = structuredClone(settingItem);
        if ((_a = listCopy[dragOverItemRef.current.index]) === null || _a === void 0 ? void 0 : _a.fixed) {
            return;
        }
        const requiredItem = listCopy[dragItemRef.current.index];
        listCopy.splice(dragOverItemRef.current.index, 0, requiredItem);
        const dragLocationIndex = dragItemRef.current.index >= dragOverItemRef.current.index
            ? dragItemRef.current.index + 1
            : dragItemRef.current.index;
        listCopy.splice(dragLocationIndex, 1);
        setSettingsItem(listCopy);
    };
    const toggleItem = (index) => {
        var _a;
        const listCopy = settingItem.slice();
        listCopy[index].selected = !((_a = listCopy[index]) === null || _a === void 0 ? void 0 : _a.selected);
        setSettingsItem(listCopy);
    };
    // Handle setting submission
    const handleSettingsSubmit = () => {
        setColumns([
            ...settingItem,
            ...prepareData(columns === null || columns === void 0 ? void 0 : columns.filter((e) => e.hideColPreference), false)
        ]);
        onClose();
    };
    const closeSettings = () => {
        // Reset to initial state
        setSettingsItem(prepareData(columns));
        onClose();
    };
    return (_jsxs("div", { className: cn("absolute top-9 w-[484px] shadow-md rounded px-4 pt-4 pb-6 bg-white z-20", "right-[-100vw] ease-in-out duration-500", { "right-0": isOpen }, "dark:border dark:border-secondary-400 dark:bg-iridium"), children: [_jsxs("div", { className: "flex items-start justify-between mb-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-md text-secondary-500 font-medium dark:text-secondary-50", children: "Table Column Preferences" }), _jsx("p", { className: "text-xs text-secondary-400 dark:text-secondary-300", children: "Customize the visibility and display order of columns" })] }), _jsx("button", { onClick: closeSettings, className: "text-secondary-500 hover:text-secondary-700 dark:text-secondary-400 dark:hover:text-secondary-200 focus:outline-none", children: _jsx(ADPIcon, { size: "md", icon: iconList.cross }) })] }), _jsx("div", { onDragEnter: (event) => event.preventDefault(), onDragOver: (event) => event.preventDefault(), onDrop: handleDrop, className: "flex flex-col mb-6 max-h-[400px] overflow-y-auto gap-4", children: (_a = [...settingItem, { id: "-1", key: "", header: "" }]) === null || _a === void 0 ? void 0 : _a.map((column, index) => {
                    return (_jsx("div", { draggable: (column === null || column === void 0 ? void 0 : column.selected) && !column.fixed, onDragStart: (event) => {
                            event.stopPropagation();
                            dragItemRef.current.index = index;
                        }, onDragEnter: (event) => {
                            event.stopPropagation();
                            dragOverItemRef.current.index = index;
                        }, onDragOver: (event) => {
                            var _a;
                            if (column.id !== "-1") {
                                (_a = event.currentTarget.classList) === null || _a === void 0 ? void 0 : _a.add("border-2", "border-dashed", "border-primary-500");
                            }
                            event.preventDefault();
                        }, onDragLeave: (event) => {
                            var _a;
                            (_a = event.currentTarget.classList) === null || _a === void 0 ? void 0 : _a.remove("border-2", "border-dashed", "border-primary-500");
                        }, onDrop: (event) => {
                            var _a;
                            (_a = event.currentTarget.classList) === null || _a === void 0 ? void 0 : _a.remove("border-2", "border-dashed", "border-primary-500");
                        }, className: cn("px-4 py-2.5 border border-secondary-100 rounded flex items-center justify-between dark:bg-secondary-800 dark:border-secondary-500", column.id === "-1"
                            ? "h-0 border-none p-0 pb-4"
                            : column.fixed
                                ? "cursor-not-allowed"
                                : "cursor-grab"), children: column.id !== "-1" && (_jsxs(_Fragment, { children: [_jsx(Toggle, { size: "sm", toggledIcon: (column === null || column === void 0 ? void 0 : column.fixed) ? iconList.lock : undefined, toggled: column === null || column === void 0 ? void 0 : column.selected, label: _jsx("span", { className: "ml-2", children: column === null || column === void 0 ? void 0 : column.header }), disabled: column === null || column === void 0 ? void 0 : column.fixed, onChange: () => {
                                        if (!(column === null || column === void 0 ? void 0 : column.fixed)) {
                                            toggleItem(index);
                                        }
                                    } }), !column.fixed && (_jsx(ADPIcon, { size: "md", icon: iconList.drag, className: "cursor-grab text-secondary-400 dark:text-secondary-500" }))] })) }, index));
                }) }), _jsxs("div", { className: "flex justify-end gap-4", children: [_jsx(Button, { size: "sm", variant: "outline", className: "w-[99px]", onClick: closeSettings, children: "Cancel" }), _jsx(Button, { size: "sm", variant: "filled", color: "primary", className: "w-[99px]", onClick: handleSettingsSubmit, children: "Save" })] })] }));
};
//# sourceMappingURL=DataTableColumnSettings.js.map