/*
 * 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 * as d3 from "d3";
import React from "react";
import style from "./hiplot.scss";
;
export class KeepOrExcludeDataBtn extends React.Component {
    constructor(props) {
        super(props);
        this.btnRef = React.createRef();
        this.state = {
            btnEnabled: this.btnEnabled()
        };
    }
    btnEnabled() {
        return 0 < this.props.rows_selected.length && this.props.rows_selected.length < this.props.rows_filtered.length;
    }
    componentDidUpdate() {
        if (this.state.btnEnabled != this.btnEnabled()) {
            this.setState({ btnEnabled: this.btnEnabled() });
        }
    }
    onClick() {
        this.props.filterRows(this.keep);
    }
    render() {
        return (React.createElement("button", { title: this.title, ref: this.btnRef, className: `btn btn-sm btn-${this.style}`, disabled: !this.state.btnEnabled, onClick: this.onClick.bind(this) }, this.label));
    }
}
;
export class KeepDataBtn extends KeepOrExcludeDataBtn {
    constructor() {
        super(...arguments);
        this.keep = true;
        this.title = "Zoom in on selected data";
        this.label = "Keep";
        this.style = "success";
    }
}
;
export class ExcludeDataBtn extends KeepOrExcludeDataBtn {
    constructor() {
        super(...arguments);
        this.keep = false;
        this.title = "Remove selected data";
        this.label = "Exclude";
        this.style = "danger";
    }
}
;
function downloadURL(url, filename) {
    var element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}
export class ExportDataCSVBtn extends React.Component {
    onClick() {
        const all_selected = this.props.rows_selected;
        var csv = d3.csvFormat(all_selected);
        var blob = new Blob([csv], { type: "text/csv" });
        var url = window.URL.createObjectURL(blob);
        downloadURL(url, `hiplot-selected-${all_selected.length}.csv`);
    }
    render() {
        return (React.createElement("button", { title: "Export data as CSV", className: "btn btn-sm btn-light", onClick: this.onClick.bind(this) }, "Export"));
    }
}
;
export class RestoreDataBtn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            btnEnabled: this.btnEnabled()
        };
    }
    btnEnabled() {
        return this.props.rows_all_unfiltered.length != this.props.rows_filtered.length;
    }
    componentDidUpdate() {
        const btnEnabled = this.btnEnabled();
        if (btnEnabled != this.state.btnEnabled) {
            this.setState({ btnEnabled: btnEnabled });
        }
    }
    onClick() {
        this.props.restoreAllRows();
    }
    render() {
        return (React.createElement("button", { title: "Remove all applied filters", className: "btn btn-sm btn-sm btn-info", disabled: !this.state.btnEnabled, onClick: this.onClick.bind(this) }, "Restore"));
    }
}
;
export class SelectedCountProgressBar extends React.Component {
    constructor() {
        super(...arguments);
        this.selectedBar = React.createRef();
    }
    componentDidMount() {
        this.updateBarWidth();
    }
    componentDidUpdate() {
        this.updateBarWidth();
    }
    updateBarWidth() {
        const selected = this.props.rows_selected.length;
        const filtered = this.props.rows_filtered.length;
        var selectedBar = this.selectedBar.current;
        selectedBar.style.width = (100 * selected / filtered) + "%";
    }
    render() {
        return (React.createElement("div", { className: style.fillbar },
            React.createElement("div", { ref: this.selectedBar, className: style.selectedBar },
                React.createElement("div", { style: { 'width': '100%' }, className: style.renderedBar }, "\u00A0"))));
    }
}
;
