SoundTab---render

render () {
    const {
        dispatchUpdateRestore, // eslint-disable-line no-unused-vars
        intl,
        isRtl,
        vm,
        onNewSoundFromLibraryClick,
        onNewSoundFromRecordingClick
    } = this.props;

    if (!vm.editingTarget) {
        return null;
    }

    const sprite = vm.editingTarget.sprite;

    const sounds = sprite.sounds ? sprite.sounds.map(sound => (
        {
            url: isRtl ? soundIconRtl : soundIcon,
            name: sound.name,
            details: (sound.sampleCount / sound.rate).toFixed(2),
            dragPayload: sound
        }
    )) : [];

    const messages = defineMessages({
        fileUploadSound: {
            defaultMessage: 'Upload Sound',
            description: 'Button to upload sound from file in the editor tab',
            id: 'gui.soundTab.fileUploadSound'
        },
        surpriseSound: {
            defaultMessage: 'Surprise',
            description: 'Button to get a random sound in the editor tab',
            id: 'gui.soundTab.surpriseSound'
        },
        recordSound: {
            defaultMessage: 'Record',
            description: 'Button to record a sound in the editor tab',
            id: 'gui.soundTab.recordSound'
        },
        addSound: {
            defaultMessage: 'Choose a Sound',
            description: 'Button to add a sound in the editor tab',
            id: 'gui.soundTab.addSoundFromLibrary'
        }
    });

    return (
        <AssetPanel
            buttons={[{
                title: intl.formatMessage(messages.addSound),
                img: addSoundFromLibraryIcon,
                onClick: onNewSoundFromLibraryClick
            }, {
                title: intl.formatMessage(messages.fileUploadSound),
                img: fileUploadIcon,
                onClick: this.handleFileUploadClick,
                fileAccept: '.wav, .mp3',
                fileChange: this.handleSoundUpload,
                fileInput: this.setFileInput,
                fileMultiple: true
            }, {
                title: intl.formatMessage(messages.surpriseSound),
                img: surpriseIcon,
                onClick: this.handleSurpriseSound
            }, {
                title: intl.formatMessage(messages.recordSound),
                img: addSoundFromRecordingIcon,
                onClick: onNewSoundFromRecordingClick
            }, {
                title: intl.formatMessage(messages.addSound),
                img: searchIcon,
                onClick: onNewSoundFromLibraryClick
            }]}
            dragType={DragConstants.SOUND}
            isRtl={isRtl}
            items={sounds}
            selectedItemIndex={this.state.selectedSoundIndex}
            onDeleteClick={this.handleDeleteSound}
            onDrop={this.handleDrop}
            onDuplicateClick={this.handleDuplicateSound}
            onExportClick={this.handleExportSound}
            onItemClick={this.handleSelectSound}
        >
            {sprite.sounds && sprite.sounds[this.state.selectedSoundIndex] ? (
                <SoundEditor soundIndex={this.state.selectedSoundIndex} />
            ) : null}
            {this.props.soundRecorderVisible ? (
                <RecordModal
                    onNewSound={this.handleNewSound}
                />
            ) : null}
            {this.props.soundLibraryVisible ? (
                <SoundLibrary
                    vm={this.props.vm}
                    onNewSound={this.handleNewSound}
                    onRequestClose={this.props.onRequestCloseSoundLibrary}
                />
            ) : null}
        </AssetPanel>
    );
}