import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useMemo, useState } from "react";
import { twMerge } from "tailwind-merge";
import { UploadFileItem, } from "../upload-file-item/upload-file-item.js";
import { getUploadListTitle } from "./utils.js";
export function UploadFileList(props) {
    const { items, title, defaultCollapsed = false, onClose, className, ...delegatedProps } = props;
    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
    const computedTitle = useMemo(() => getUploadListTitle(items.length, title), [items.length, title]);
    return (_jsxs("div", { className: twMerge("w-[358px] rounded-md border border-gray-100 bg-gray-50 p-4 shadow-[1px_4px_15px_rgba(74,88,115,0.25)]", className), ...delegatedProps, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("button", { type: "button", "aria-expanded": !isCollapsed, "aria-label": isCollapsed ? "Expand list" : "Collapse list", onClick: () => setIsCollapsed((v) => !v), className: "min-w-0 flex-1 text-left text-sm font-medium leading-4 text-gray-900 hover:opacity-80", children: computedTitle }), _jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [_jsx("button", { type: "button", "aria-label": isCollapsed ? "Expand" : "Collapse", onClick: () => setIsCollapsed((v) => !v), className: "text-gray-900 hover:opacity-80", children: _jsx("span", { className: twMerge("inline-block h-4 w-4 select-none transition-transform", isCollapsed ? "-rotate-90" : "rotate-0"), children: _jsx(Icon, { name: "CaretDown", size: 16, "aria-hidden": "true" }) }) }), onClose && (_jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "text-gray-900 hover:opacity-80", children: _jsx("span", { className: "inline-block h-4 w-4 select-none", children: _jsx(Icon, { name: "XmarkLight", size: 16, "aria-hidden": "true" }) }) }))] })] }), !isCollapsed && (_jsx("div", { className: "mt-4 flex max-h-[404px] flex-col gap-4 overflow-y-auto overflow-x-visible px-2 py-2", children: items.map((item, idx) => (_jsx(UploadFileItem, { ...item }, `${item.fileName}-${idx}`))) }))] }));
}
//# sourceMappingURL=upload-file-list.js.map