import React, { useState } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import PropTypes from 'prop-types';
/**
 * @returns {import('@material-ui/core/styles').WithStyles<import('@material-ui/core/styles/withStyles').Styles<any, {}, string>>}
 */
export const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer'
    },
    off: {
        opacity: 0.5
    }
}));
export const TimelineToggleButton = ({ title, timelineItem, handleClick, icon, off }) => {
    //const [width, setWidth] = useState(0);
    const classes = useStyles();
    const [filter, setFilter] = useState(true);
    const selectFilter = () => {
        setFilter(!filter);
    };
    return (React.createElement("div", { className: classes.root, onClick: handleClick, onMouseUp: selectFilter }, React.createElement("div", { className: off && classes.off }, icon), React.createElement("div", { style: { marginTop: -4, marginRight: 48 } }, React.createElement(Typography, { variant: "caption", style: { textDecoration: !filter && 'line-through' } }, title))));
};
TimelineToggleButton.propTypes = {
    title: PropTypes.string.isRequired,
    timelineItem: PropTypes.object,
    handleClick: PropTypes.func.isRequired,
    icon: PropTypes.node.isRequired,
    off: PropTypes.bool
};
//# sourceMappingURL=TimelineToggleButton.js.map