import React, { useState } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { FluentSearchField } from '../../UI/inputs/textField/FluentSearchField';
import { ActionSummaryHeader, ActionSummaryListContainer } from '.';
const useStyles = makeStyles((theme) => ({
    root: {
        width: 750,
        paddingLeft: 12,
        paddingRight: 12,
        maxHeight: 750,
        overflowY: 'scroll'
    },
    header: {
        display: 'flex',
        justifyContent: 'space-between'
        //backgroundColor: 'red'
    }
}));
export const ActionSummaryCard = ({ actionMenuContent, selectedNode }) => {
    const classes = useStyles();
    const [searchValue, setSearchValue] = useState('');
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.header }, React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'center',
            flexDirection: 'column'
        } }, React.createElement(Typography, { variant: "h6" }, "Actions")), React.createElement(FluentSearchField, { id: "udpRecord-ActionSummaryCard-Search", udprecordid: "udpRecord-ActionSummaryCard-Search", value: searchValue, onChange: (e) => setSearchValue(e.target.value), variant: "filled", 
        // searchOptions={searchOptions}
        style: { marginTop: 0, paddingTop: 0 } })), actionMenuContent.map((section, i) => (React.createElement(React.Fragment, null, React.createElement(ActionSummaryHeader, { key: i, iconType: section.iconType, icon: section.icon, header: section.header }), React.createElement(ActionSummaryListContainer, { key: i, selectedNode: selectedNode, items: section.items.map((item) => {
            const highlighted = (item === null || item === void 0 ? void 0 : item.value) &&
                item.value.toLowerCase().includes(searchValue.toLowerCase()) &&
                searchValue.length > 0;
            return Object.assign(Object.assign({}, item), { highlighted: highlighted || item.highlighted });
        }) }))))));
};
//# sourceMappingURL=ActionSummaryCard.js.map