@bigfishtv/cockpit/src/components/asset/AssetFinderToolbar.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'

import { titleCase } from '../../utils/stringUtils'

import Button from '../button/Button'
import DropdownButton from '../button/dropdown/DropdownButton'
import DropdownItem from '../button/dropdown/DropdownItem'

/**
 * Toolbar that belongs to AssetFinder, contains filtering dropdowns for asset type, view mode and a delete button
 */
export default class AssetFinderToolbar extends Component {
	static propTypes = {
		/** Array of currently selected asset ids */
		selectedIds: PropTypes.array,
		/** Current asset type or null for all */
		assetType: PropTypes.string,
		/** Current view mode */
		viewMode: PropTypes.string,
		/** Called when asset type is changed */
		onAssetTypeChange: PropTypes.func,
		/** Called when view mode is changed */
		onViewModeChange: PropTypes.func,
		/** Called when delete button pressed */
		onAssetDelete: PropTypes.func,
	}

	render() {
		const { selectedIds, assetType, viewMode, onViewModeChange, onAssetTypeChange, onAssetDelete } = this.props
		return (
			<div>
				<DropdownButton text={assetType ? titleCase(assetType) + 's' : 'All'} icon={assetType} pullRight={true}>
					<DropdownItem text="All" onClick={() => onAssetTypeChange(null)} />
					<DropdownItem text="Images" onClick={() => onAssetTypeChange('image')} icon="image" />
					<DropdownItem text="Videos" onClick={() => onAssetTypeChange('video')} icon="video" />
					<DropdownItem text="Documents" onClick={() => onAssetTypeChange('document')} icon="document" />
				</DropdownButton>
				<DropdownButton text={titleCase(viewMode + ' View')} icon={viewMode} pullRight={true}>
					<DropdownItem text="Grid View" onClick={() => onViewModeChange('grid')} icon="grid" />
					<DropdownItem text="List View" onClick={() => onViewModeChange('list')} icon="list" />
				</DropdownButton>
				<Button text="Delete" onClick={onAssetDelete} style="error" disabled={!selectedIds.length} />
			</div>
		)
	}
}