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
                            className="zoom-selected"
                            onClick={this.props.onZoomToSelected}
                        >
                            Zoom to Selected
                        </div>
                    )}

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

                    {/* Zoom out */}
                    <div className="zoom-out" onClick={this.onZoomOut}>
                        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;
