import React, { Component } from "react";
import PropTypes from "prop-types";
import WellLogViewWithScroller from "./components/WellLogViewWithScroller";
import InfoPanel from "./components/InfoPanel";
import AxisSelector from "./components/AxisSelector";
import ZoomSlider from "./components/ZoomSlider";
import { getAvailableAxes } from "./utils/tracks";
import { axisTitles, axisMnemos } from "./utils/axes";
import { onTrackMouseEvent } from "./utils/edit-track";
import { fillInfos } from "./utils/fill-info";
class WellLogViewer extends Component {
    constructor(props) {
        super(props);
        const axes = getAvailableAxes(this.props.welllog, axisMnemos);
        let primaryAxis = axes[0];
        if (this.props.template && this.props.template.scale.primary) {
            if (axes.indexOf(this.props.template.scale.primary) >= 0)
                primaryAxis = this.props.template.scale.primary;
        }
        this.state = {
            primaryAxis: primaryAxis,
            axes: axes,
            infos: [],
            sliderValue: 4.0,
        };
        this.controller = null;
        this.collapsedTrackIds = [];
        this.collapsedTrackIds = [];
        this.onCreateController = this.onCreateController.bind(this);
        this.onInfo = this.onInfo.bind(this);
        this.onChangePrimaryAxis = this.onChangePrimaryAxis.bind(this);
        this.onContentRescale = this.onContentRescale.bind(this);
        this.onContentSelection = this.onContentSelection.bind(this);
        this.onTemplateChanged = this.onTemplateChanged.bind(this);
        this.onZoomSliderChange = this.onZoomSliderChange.bind(this);
        this.onInfoGroupClick = this.onInfoGroupClick.bind(this);
    }
    componentDidMount() {
        this.setSliderValue();
    }
    shouldComponentUpdate(nextProps, nextState) {
        return (!Object.is(this.props, nextProps) ||
            !Object.is(this.state, nextState));
    }
    componentDidUpdate(prevProps /*, prevState: State*/) {
        if (this.props.welllog !== prevProps.welllog ||
            this.props.template !== prevProps.template /*||
        this.props.colorTables !== prevProps.colorTables*/) {
            const axes = getAvailableAxes(this.props.welllog, axisMnemos);
            let primaryAxis = axes[0];
            if (this.props.template && this.props.template.scale.primary) {
                if (axes.indexOf(this.props.template.scale.primary) < 0) {
                    if (this.props.welllog === prevProps.welllog)
                        return; // nothing to update
                }
                else {
                    primaryAxis = this.props.template.scale.primary;
                }
            }
            this.setState({
                primaryAxis: primaryAxis,
                axes: axes,
                // will be changed by callback! infos: [],
            });
        }
        if (this.props.domain &&
            (!prevProps.domain ||
                this.props.domain[0] !== prevProps.domain[0] ||
                this.props.domain[1] !== prevProps.domain[1])) {
            this.setControllerZoom();
        }
        if (this.props.selection &&
            (!prevProps.selection ||
                this.props.selection[0] !== prevProps.selection[0] ||
                this.props.selection[1] !== prevProps.selection[1])) {
            this.setControllerSelection();
        }
        if (this.props.readoutOptions &&
            (!prevProps.readoutOptions ||
                this.props.readoutOptions.allTracks !==
                    prevProps.readoutOptions.allTracks ||
                this.props.readoutOptions.grouping !==
                    prevProps.readoutOptions.grouping)) {
            this.updateReadoutPanel();
        }
    }
    updateReadoutPanel() {
        const controller = this.controller;
        if (controller)
            controller.selectContent(controller.getContentSelection()); // force to update readout panel
    }
    // callback function from WellLogView
    onInfo(x, logController, iFrom, iTo) {
        const infos = fillInfos(x, logController, iFrom, iTo, this.collapsedTrackIds, this.props.readoutOptions);
        this.setState({
            infos: infos,
        });
    }
    // callback function from WellLogView
    onCreateController(controller) {
        this.controller = controller;
        if (this.props.onCreateController)
            // set callback to component's caller
            this.props.onCreateController(controller);
        this.setControllerZoom();
    }
    // callback function from WellLogView
    onContentRescale() {
        this.setSliderValue();
        if (this.props.onContentRescale)
            this.props.onContentRescale();
    }
    // callback function from WellLogView
    onContentSelection() {
        this.setSliderValue();
        if (this.props.onContentSelection)
            this.props.onContentSelection();
    }
    onTemplateChanged() {
        if (this.props.onTemplateChanged) {
            if (this.props.onTemplateChanged)
                this.props.onTemplateChanged();
        }
    }
    // callback function from Axis selector
    onChangePrimaryAxis(value) {
        this.setState({ primaryAxis: value });
    }
    // callback function from Zoom slider
    onZoomSliderChange(value) {
        const controller = this.controller;
        if (controller) {
            controller.zoomContent(value);
        }
    }
    // set zoom value to slider
    setSliderValue() {
        this.setState((state) => {
            if (!this.controller)
                return null;
            const zoom = this.controller.getContentZoom();
            if (Math.abs(Math.log(state.sliderValue / zoom)) < 0.01)
                return null;
            return { sliderValue: zoom };
        });
    }
    setControllerZoom() {
        if (!this.controller)
            return;
        if (this.props.domain)
            this.controller.zoomContentTo(this.props.domain);
    }
    setControllerSelection() {
        if (!this.controller)
            return;
        if (this.props.selection)
            this.controller.selectContent(this.props.selection);
    }
    onInfoGroupClick(trackId) {
        const i = this.collapsedTrackIds.indexOf(trackId);
        if (i < 0)
            this.collapsedTrackIds.push(trackId);
        else
            delete this.collapsedTrackIds[i];
        this.updateReadoutPanel();
        if (this.controller)
            this.controller.selectContent(this.controller.getContentSelection()); // force to update readout panel
    }
    render() {
        const maxContentZoom = 256;
        const checkDatafileSchema = true;
        return (React.createElement("div", { style: { height: "100%", width: "100%", display: "flex" } },
            React.createElement(WellLogViewWithScroller, { welllog: this.props.welllog, template: this.props.template, colorTables: this.props.colorTables, horizontal: this.props.horizontal, hideTitles: this.props.hideTitles, hideLegend: this.props.hideLegend, maxVisibleTrackNum: this.props.horizontal ? 3 : 5, maxContentZoom: maxContentZoom, checkDatafileSchema: checkDatafileSchema, primaryAxis: this.state.primaryAxis, axisTitles: axisTitles, axisMnemos: axisMnemos, onInfo: this.onInfo, onCreateController: this.onCreateController, onTrackMouseEvent: onTrackMouseEvent, onContentRescale: this.onContentRescale, onContentSelection: this.onContentSelection, onTemplateChanged: this.onTemplateChanged }),
            React.createElement("div", { style: {
                    flex: "0, 0",
                    display: "flex",
                    flexDirection: "column",
                    height: "100%",
                    width: "255px",
                    minWidth: "255px",
                    maxWidth: "255px",
                } },
                React.createElement(AxisSelector, { header: "Primary scale", axes: this.state.axes, axisLabels: axisTitles, value: this.state.primaryAxis, onChange: this.onChangePrimaryAxis }),
                React.createElement(InfoPanel, { header: "Readout", onGroupClick: this.onInfoGroupClick, infos: this.state.infos }),
                React.createElement("br", null),
                React.createElement("div", { style: { paddingLeft: "10px", display: "flex" } },
                    React.createElement("span", null, "Zoom:"),
                    React.createElement("span", { style: {
                            flex: "1 1 100px",
                            padding: "0 20px 0 10px",
                        } },
                        React.createElement(ZoomSlider, { value: this.state.sliderValue, max: maxContentZoom, onChange: this.onZoomSliderChange }))))));
    }
}
///
const InfoOptions_propTypes = PropTypes.shape({
    /**
     * Show not only visible tracks
     */
    allTracks: PropTypes.bool,
    /**
     * how group values. "" | "track"
     */
    grouping: PropTypes.string,
});
/*
 */
WellLogViewer.propTypes = {
    /**
     * The ID of this component, used to identify dash components
     * in callbacks. The ID needs to be unique across all of the
     * components in an app.
     */
    id: PropTypes.string.isRequired,
    /**
     * Array of JSON objects describing well log data
     */
    welllog: PropTypes.array.isRequired,
    /**
     * Prop containing track template data
     */
    template: PropTypes.object.isRequired,
    /**
     * Prop containing color table data
     */
    colorTables: PropTypes.array.isRequired,
    /**
     * Orientation of the track plots on the screen. Default is false
     */
    horizontal: PropTypes.bool,
    /**
     * Hide titles of the track. Default is false
     */
    hideTitles: PropTypes.bool,
    /**
     * Hide legends of the track. Default is false
     */
    hideLegend: PropTypes.bool,
    /**
     * Options for readout panel
     */
    readoutOptions: InfoOptions_propTypes /*PropTypes.object,*/,
    /**
     * Initial visible interval of the log data
     */
    domain: PropTypes.arrayOf(PropTypes.number),
    /**
     * Initial selected interval of the log data
     */
    selection: PropTypes.arrayOf(PropTypes.number),
};
export default WellLogViewer;
//# sourceMappingURL=WellLogViewer.js.map