import React, { useMemo } from "react";
import { MoreTrigger } from "../MoreTrigger/MoreTrigger";
import { CellUI } from "../Cell/Cell";
import { getFileIcon, getFilenameParts } from "../../utils";
import { StyledDropdown } from "./Dropdown.styles";
export const DropdownUI = ({ rootWrapper: Root, size, filesInfo, customIcon, handleClear, ...rest })=>{
    const parsedItems = useMemo(()=>{
        return Object.entries(filesInfo).filter(([, { isVisible }])=>!isVisible).map(([key, { filenameWithoutExtension, extension }])=>({
                value: `${filenameWithoutExtension}.${extension}`,
                label: key
            }));
    }, [
        filesInfo
    ]);
    return /*#__PURE__*/ React.createElement(StyledDropdown, {
        items: parsedItems,
        renderItem: ({ value, label })=>{
            const { filenameWithoutExtension, extension } = getFilenameParts(String(value));
            return /*#__PURE__*/ React.createElement(Root, null, /*#__PURE__*/ React.createElement(CellUI, {
                size: size,
                filenameWithoutExtension: filenameWithoutExtension,
                extension: extension,
                cellContentLeft: customIcon || getFileIcon(extension, size),
                onClick: ()=>handleClear(label),
                isInsideDropdown: true
            }));
        },
        ...rest,
        closeOnSelect: false
    }, /*#__PURE__*/ React.createElement(MoreTrigger, {
        size: size
    }));
};
