import React from "react";
import PropTypes from "prop-types";
import IDUtil from "../../../../util/IDUtil";

// Show and handle timeline actions, like search, zoom and navigation
class Actions extends React.PureComponent {
    onSearch = (e) => {
        this.props.onSearch(e.target.value);
    };

    onZoomIn = () => {
        this.props.onZoom(1.1, 0.5);
    };

    onZoomOut = () => {
        this.props.onZoom(0.9, 0.5);
    };

    onBackward = () => {
        this.props.onMove(-0.1 * this.props.duration);
    };

    onForward = () => {
        this.props.onMove(0.1 * this.props.duration);
    };

    render() {
        const hasSelected = this.props.onZoomToSelected;
        return (
            <div className={IDUtil.cssClassName("tl-actions")}>
                {/* Search input */}
                <input
                    ref={this.searchRef}
                    placeholder="Search in layers..."
                    defaultValue=""
                    onChange={this.onSearch}
                />

                <div className="right">
                    {/* Zoom to selected */}
                    {hasSelected && (
                        <div
                            title="Zoom to selected"
                            className="zoom-selected"
                            onClick={this.props.onZoomToSelected}
                        >
                            Zoom to Selected
                        </div>
                    )}

                    {/* Zoom in */}
                    <div
                        className="zoom-in"
                        onClick={this.onZoomIn}
                        title="Zoom in"
                    >
                        Zoom in
                    </div>

                    {/* Zoom out */}
                    <div
                        className="zoom-out"
                        onClick={this.onZoomOut}
                        title="Zoom out"
                    >
                        Zoom out
                    </div>

                    {/* Navigate to previous selected, or backwards in time */}
                    <div
                        className="prev"
                        title={
                            this.props.onSelectPrev ? "Previous" : "Backward"
                        }
                        onClick={
                            this.props.onSelectPrev
                                ? this.props.onSelectPrev
                                : this.onBackward
                        }
                    >
                        Previous
                    </div>

                    {/* Navigate to next selected, or forwards in time */}
                    <div
                        className="next"
                        title={this.props.onSelectNext ? "Next" : "Forward"}
                        onClick={
                            this.props.onSelectNext
                                ? this.props.onSelectNext
                                : this.onForward
                        }
                    >
                        Next
                    </div>
                </div>
            </div>
        );
    }
}

Actions.propTypes = {
    onSearch: PropTypes.func.isRequired,
    onZoom: PropTypes.func.isRequired,
    onMove: PropTypes.func.isRequired,
    onSelectPrev: PropTypes.func,
    onSelectNext: PropTypes.func,
    onZoomToSelected: PropTypes.func,
    duration: PropTypes.number.isRequired,
};

export default Actions;