import GridWidget, {GridProps} from "./GridWidget";
import {AppStore, getAppState} from "../StateStore";
import UIComponent from "./UIComponent";
import * as JSX from "../JSXFactory";
import Timeseries from "../Timeseries";

class LegendWidget extends UIComponent {
    private skeleton: GridWidget;
    private display: HTMLSpanElement = document.createElement("span");
    private bodyRef: HTMLElement;

    constructor(gridProps: GridProps) {
        super();
        this.display = <this.MainBody />;
        this.skeleton = new GridWidget({
            ...gridProps,
            title: "Legend:",
            className: "legend-widget",
            body: this.display,
        });
        AppStore().subscribeStoreVal("highlightedTimeseries", () => this.updateDisplay());
        this.updateDisplay();
    }

    private updateDisplay() {
        this.bodyRef.replaceWith(<this.MainBody />);
    }

    private MainBody = () => {
        this.bodyRef = <div><this.TimeseriesList /></div>;
        return this.bodyRef;
    }

    private TimeseriesList = () => {
        const highlightedTimeseries = getAppState().highlightedTimeseries;
        return <ul>
            { ...getAppState().rightTimeseries.map(timeseries =>
                <this.TimeseriesLegendEntry
                    timeseries={timeseries}
                    highlighted={timeseries.getName() === highlightedTimeseries}/>) }
            { ...getAppState().leftTimeseries.map(timeseries =>
                <this.TimeseriesLegendEntry
                    timeseries={timeseries}
                    highlighted={timeseries.getName() === highlightedTimeseries}/>) }
        </ul>;
    }

    private TimeseriesLegendEntry = ({timeseries, highlighted}: {timeseries: Timeseries, highlighted: boolean}) => {
        const option = new Option();
        option.style.color = timeseries.getColour();
        return <li
            style={`color: ${option.style.color}`}
            className={highlighted ? "highlighted" : ""}
            onmouseover={() => AppStore().setHighlightedTimeseries(timeseries.getName())}
            onmouseout={() => AppStore().setHighlightedTimeseries(null)}>
            {timeseries.getName()}
        </li>;
    }

    current() {
        return this.skeleton.current();
    }
}

export default LegendWidget;