import PropTypes from 'prop-types';
import IDUtil from '../../../util/IDUtil';
import MediaObject from '../../../model/MediaObject';
import classNames from 'classnames';

/*
 *   Render a single row of a MediaObject playlist dropdown
 */

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

    onClick = () => {
        this.props.onClick(this.props.mediaObject);
    };

    render = () => {
        return (
            <div
                className={classNames(
                    IDUtil.cssClassName('playlist-dropdown-row'),
                    { active: this.props.active }
                )}
                onClick={this.onClick}
            >
                <span title={'Carrier ID: ' + this.props.mediaObject.assetId}>
                    {this.props.title}
                </span>
                {this.props.count && (
                    <span
                        className="count"
                        title="Number of transcript matches with initial search term"
                    >
                        {this.props.count}
                    </span>
                )}
            </div>
        );
    };
}

PlaylistDropdownRow.propTypes = {
    // row title
    title: PropTypes.string.isRequired,

    // count indicator (e.g. transcriptMatches)
    count: PropTypes.number,

    // is the row active?
    active: PropTypes.bool.isRequired,

    // MediaObject to pass to the onClick handler
    mediaObject: MediaObject.getPropTypes(true),

    // OnClick handler, receives the provided mediaObject
    onClick: PropTypes.func.isRequired
};