/*
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import $ from "jquery";
import React from "react";
import * as d3 from "d3";
import _ from "underscore";
import { DistributionPlot } from "./plot";
import { ResizableH } from "../lib/resizable";
;
;
;
export class HiPlotDistributionPlugin extends React.Component {
    constructor(props) {
        super(props);
        this.container_ref = React.createRef();
        var axis = this.props.persistent_state.get('axis', null);
        if (axis && this.props.params_def[axis] === undefined) {
            axis = null;
        }
        if (!axis) {
            axis = this.props.axis;
        }
        if (axis && this.props.params_def[axis] === undefined) {
            axis = null;
        }
        const initialHeight = d3.min([d3.max([document.body.clientHeight - 540, 240]), 500]);
        this.state = {
            initialHeight: initialHeight,
            height: initialHeight,
            width: 0,
            histData: { selected: [], all: props.rows_filtered },
            axis: axis !== undefined ? axis : null,
        };
    }
    componentDidMount() {
        if (this.props.context_menu_ref && this.props.context_menu_ref.current) {
            const me = this;
            this.props.context_menu_ref.current.addCallback(function (column, cm) {
                var contextmenu = $(cm);
                contextmenu.append($('<div class="dropdown-divider"></div>'));
                var option = $('<a class="dropdown-item" href="#">').text("View distribution");
                if (me.state.axis == column) {
                    option.addClass('disabled').css('pointer-events', 'none');
                }
                option.click(function (event) {
                    me.setState({ axis: column });
                    event.preventDefault();
                });
                contextmenu.append(option);
            }, this);
        }
    }
    componentDidUpdate(prevProps, prevState) {
        if (prevState.axis != this.state.axis) {
            if (this.props.persistent_state) {
                this.props.persistent_state.set('axis', this.state.axis);
            }
        }
        if (this.state.histData.all != this.props.rows_filtered) {
            this.setState(function (s, p) {
                return {
                    histData: {
                        ...s.histData,
                        all: this.props.rows_filtered,
                        selected: this.props.rows_selected,
                    }
                };
            }.bind(this));
        }
        else if (this.state.histData.selected != this.props.rows_selected) {
            this.setState(function (s, p) {
                return {
                    histData: {
                        ...s.histData,
                        selected: this.props.rows_selected,
                    }
                };
            }.bind(this));
        }
    }
    componentWillUnmount() {
        if (this.props.context_menu_ref && this.props.context_menu_ref.current) {
            this.props.context_menu_ref.current.removeCallbacks(this);
        }
    }
    onResize(height, width) {
        if (height != this.state.height || width != this.state.width) {
            this.setState({ height: height, width: width });
        }
    }
    disable() {
        this.setState({ width: 0, axis: null, height: this.state.initialHeight });
    }
    render() {
        if (this.state.axis === null) {
            return [];
        }
        const param_def = this.props.params_def[this.state.axis];
        console.assert(param_def !== undefined, this.state.axis);
        return (React.createElement(ResizableH, { initialHeight: this.state.height, onResize: _.debounce(this.onResize.bind(this), 150), onRemove: this.disable.bind(this) }, this.state.width > 0 && React.createElement(DistributionPlot, { axis: this.state.axis, height: this.state.height, width: this.state.width, histData: this.state.histData, param_def: param_def, nbins: this.props.nbins, animateMs: this.props.animateMs })));
    }
}
HiPlotDistributionPlugin.defaultProps = {
    nbins: 10,
    animateMs: 750,
};
;
