import BarLabel from "./BarLabel";
import React, { useRef, useState, } from "react";
import ReactDOM from "react-dom";
const Bar = (props) => {
    const [isHovered, setIsHovered] = useState(false);
    const barRef = useRef(null);
    // calculate bar width.
    let barWidth = ((props.bar.barTimelineEnd - props.bar.barTimelineStart) /
        (props.chartTimelineEnd - props.chartTimelineStart)) *
        props.timelineWidth;
    const barLeftPosition = ((props.bar.barTimelineStart - props.chartTimelineStart) /
        (props.chartTimelineEnd - props.chartTimelineStart)) *
        props.timelineWidth;
    if (barWidth > 1) {
        barWidth -= 1; // we do this because the bar width is calculated based on the timeline width, and we want to remove 1px from the width to account for the 1px margin on the left and right of the bar.
    }
    if (barWidth < 5) {
        barWidth = 5;
    }
    const handleMouseEnter = () => {
        setIsHovered(true);
    };
    const handleMouseLeave = () => {
        setIsHovered(false);
    };
    let barOpacity = 0.9;
    if (props.areOtherBarsSelected && !props.isSelected) {
        barOpacity = 0.5;
    }
    if (props.isHighlighted) {
        barOpacity = 1;
    }
    if (isHovered) {
        barOpacity = 1;
    }
    const highlightShadow = props.isHighlighted
        ? "0 0 0 2px rgba(99, 102, 241, 0.8), 0 0 14px rgba(129, 140, 248, 0.55)"
        : undefined;
    return (
    // rectangle div with curved corners and text inside in tailwindcss
    React.createElement("div", { className: "flex absolute", style: {
            marginLeft: `${barLeftPosition}px`,
        } },
        React.createElement("div", { ref: barRef, className: "chart-bar h-8 pt-1 pb-1 mt-2.5 mb-2.5 rounded absolute cursor-pointer ml-1 mr-1", style: {
                width: `${barWidth}px`,
                backgroundColor: `${props.bar.barColor.toString()}`,
                opacity: barOpacity,
                boxShadow: highlightShadow,
                zIndex: props.isHighlighted ? 30 : undefined,
            }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: () => {
                if (props.isSelected) {
                    props.onDeselect(props.bar.id);
                }
                else {
                    props.onSelect(props.bar.id);
                }
            } }),
        isHovered &&
            props.bar.tooltip &&
            barRef.current &&
            ReactDOM.createPortal(React.createElement("div", { className: "bar-tooltip cursor-pointer bg-white shadow-lg rounded p-2 w-fit", style: {
                    position: "fixed",
                    zIndex: 9999,
                    top: barRef.current.getBoundingClientRect().bottom + 4,
                    left: barRef.current.getBoundingClientRect().left,
                    pointerEvents: "none",
                } }, props.bar.tooltip), document.body),
        React.createElement("div", { className: "h-8 pt-1 pb-1 mt-2.5 mb-2.5", style: {
                marginLeft: `${barWidth + 15}px`,
                opacity: barOpacity,
                fontWeight: props.isHighlighted ? 600 : undefined,
                color: props.isHighlighted ? "#4338ca" : undefined,
            } },
            React.createElement(BarLabel, { label: props.bar.label }))));
};
export default Bar;
//# sourceMappingURL=Index.js.map