import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import IDUtil from '../../../util/IDUtil';
import Strings from '../_Strings';
import Info from '../../shared/Info';

export default class TypeHeader extends React.PureComponent {
    render() {
        const type = this.props.type;

        // type header
        return (
            <div
                className={IDUtil.cssClassName('type-header')}
                onClick={this.props.toggleForm}
            >
                <Info
                    id={'annotation-type-' + type + '-help'}
                    text={Strings['ANNOTATION_TYPE_HELP_' + type.toUpperCase()]}
                    className="left"
                />
                <span className="title">
                    {Strings['ANNOTATION_TYPE_TITLE_' + type.toUpperCase()]}
                </span>
                <span
                    title={
                        this.props.showForm
                            ? Strings.ANNOTATION_TYPE_ADD_STOP
                            : Strings.ANNOTATION_TYPE_ADD
                    }
                    className={classNames('edit', {
                        active: this.props.showForm
                    })}
                ></span>
            </div>
        );
    }
}

TypeHeader.propTypes = {
    type: PropTypes.string.isRequired,
    showForm: PropTypes.bool.isRequired,
    toggleForm: PropTypes.func.isRequired
};