import React from 'react';
import { makeStyles } from '@material-ui/core';
import { TimelineToggleButton } from './TimelineToggleButton';
import { IconRenderer } from '../../../UI/templates/ui/renderers/IconRenderer';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    menu: {
        marginTop: 10,
        marginRight: 8,
        marginBottom: 20
    }
}));
export const TimelineTopRowFilter = ({ filterList, filterCall, filterListGroup, off, clear }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", null, React.createElement("div", null, React.createElement("div", { style: { display: 'flex' } }, filterListGroup &&
        filterListGroup.map((item) => {
            return (React.createElement(TimelineToggleButton, { title: item.name, timelineItem: item.name, handleClick: () => filterCall(item.name), off: off, icon: React.createElement(IconRenderer, { noBorder: true, value: {
                        color: { hex: '#' + item.color },
                        name: item.icon
                    } }) }));
        }))))));
};
TimelineTopRowFilter.propTypes = {
    filterList: PropTypes.array,
    filterCall: PropTypes.func,
    filterListGroup: PropTypes.array,
    off: PropTypes.bool,
    clear: PropTypes.func
};
//# sourceMappingURL=TimelineTopRowFilter.js.map