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

export default class SegmentActions extends React.PureComponent {
    constructor(props) {
        super(props);

        // constructor here
    }

    renderButton(label, description, onClick, className = 'btn') {
        if (!onClick) {
            return null;
        }

        return (
            <button title={description} onClick={onClick} className={className}>
                {label}
            </button>
        );
    }

    render() {
        const buttons = {
            addSegment: this.renderButton( //TODO make sure to show the i + o buttons
                '+ Add segment',
                'Add new segment (SHIFT+N)',
                this.props.addSegment,
                'btn btn-primary'
            ),
            addSegmentAfterActiveSegment: this.renderButton(
                '+ Concatenate',
                'Concatenates a new segment to the end of the active segment (CTRL+N)',
                this.props.addSegmentAfterActiveSegment
            ),
            saveSegment: this.renderButton(
                'Save',
                'Save segment (SHIFT+S)',
                this.props.saveSegment
            ),
            deleteSegment: this.renderButton(
                'Delete',
                'Delete current annotation (SHIFT+D)',
                this.props.deleteSegment
            )
        };
        return (
            <div className={IDUtil.cssClassName('segment-actions')}>
                <div className="row">
                    {buttons.addSegment}
                    <span>Editing segment:</span>
                    {buttons.addSegmentAfterActiveSegment}
                    {buttons.saveSegment}
                    {buttons.deleteSegment}
                </div>
            </div>
        );
    }
}

SegmentActions.propTypes = {
    addSegment: PropTypes.func.isRequired,

    // optional, only if there is an active segment
    saveSegment: PropTypes.func,
    addSegmentAfterActiveSegment: PropTypes.func,
    deleteSegment: PropTypes.func
};
