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

/**
 * Show a list of MediaObjects in a playlist dropdown
 */
export default class PlaylistDropdown extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        const items = this.props.mediaObjects.map((mediaObject, index) => (
            <PlaylistDropdownRow
                key={index}
                title={mediaObject.assetId}
                active={this.props.activeId == mediaObject.assetId}
                mediaObject={mediaObject}
                count={
                    this.props.transcriptMatches[mediaObject.assetId]
                        ? this.props.transcriptMatches[mediaObject.assetId]
                        : null
                }
                onClick={this.props.onSelect}
            />
        ));

        return (
            <div className={IDUtil.cssClassName('playlist-dropdown')}>
                {items}
            </div>
        );
    }
}

PlaylistDropdown.propTypes = {
    // List of the mediaObjects in the dropdown
    mediaObjects: PropTypes.arrayOf(MediaObject.getPropTypes(true)).isRequired,

    // Number of transcript matches (with the initial search term) per media object
    transcriptMatches: PropTypes.object,

    // Select function, accepts a MediaObject
    onSelect: PropTypes.func.isRequired,

    // Id of the active MediaObject
    activeId: PropTypes.string.isRequired
};