import ChartContainer from "./ChartContainer";
import Rows from "./Rows";
import Timeline from "./Timeline/Index";
import React, { useEffect } from "react";
const GanttChart = (props) => {
    const eachIntervalDefaultWidth = 100; // in pixels
    const [chartWidth, setChartWidth] = React.useState(0);
    const [timelineWidth, setTimelineWidth] = React.useState(2000);
    const [eachIntervalWidth, setEachIntervalWidth] = React.useState(eachIntervalDefaultWidth);
    const numberOfInterval = (props.chart.timeline.end - props.chart.timeline.start) /
        props.chart.timeline.interval;
    const totalIntervalWidth = eachIntervalDefaultWidth * numberOfInterval;
    useEffect(() => {
        if (chartWidth < totalIntervalWidth) {
            setChartWidth(totalIntervalWidth);
        }
        else {
            setEachIntervalWidth(chartWidth / numberOfInterval);
        }
        const timelineWidth = chartWidth * 0.75; // 75 % of chart width, 25% for category spacer
        setTimelineWidth(timelineWidth); // 75 % of chart width, 25% for category spacer
    }, [chartWidth]);
    return (React.createElement(ChartContainer, { onWidthChange: (width) => {
            setChartWidth(width);
        } },
        React.createElement("div", { style: {
                width: `${chartWidth}px`,
            } },
            React.createElement(Timeline, { timeline: props.chart.timeline, eachIntervalWidth: eachIntervalWidth - 0.25 * eachIntervalWidth }),
            React.createElement(Rows, Object.assign({ timelineWidth: timelineWidth, chartTimelineEnd: props.chart.timeline.end, chartTimelineStart: props.chart.timeline.start, rows: props.chart.rows, selectedBarIds: props.chart.selectedBarIds }, (props.chart.multiSelect !== undefined
                ? { multiSelect: props.chart.multiSelect }
                : {}), (props.chart.highlightBarIds
                ? { highlightBarIds: props.chart.highlightBarIds }
                : {}), { onBarSelectChange: (barIds) => {
                    props.chart.onBarSelectChange(barIds);
                } })))));
};
export default GanttChart;
//# sourceMappingURL=Index.js.map