@bigfishtv/cockpit/src/components/template/AssetsIndex.js

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

import Media from '../asset/AssetFinder'
import MainContent from '../container/MainContent'
import Bulkhead from '../page/Bulkhead'
import UploadButton from '../upload/Upload'

const Toolbar = props => (
	<UploadButton style="primary" size="large" onReceivedFiles={props.toolbarProps.handleReceivedFiles} />
)

/**
 * For displaying AssetFinder in a page format
 */
export default class MediaPage extends Component {
	static propTypes = {
		defaultFolderId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
		assetGetUrl: PropTypes.string,
		assetUpdateUrl: PropTypes.string,
		assetDeleteUrl: PropTypes.string,
		folderGetUrl: PropTypes.string,
		folderUpdateUrl: PropTypes.string,
		folderDeleteUrl: PropTypes.string,
		showUnsortedFolder: PropTypes.bool,
	}

	static defaultProps = {
		defaultFolderId: null,
		assetGetUrl: '/tank/assets.json',
		assetNewUrl: '/tank/assets.json',
		assetUpdateUrl: '/tank/assets/',
		assetDeleteUrl: '/tank/assets/delete.json',
		folderGetUrl: '/admin/tank/asset_folders/tree.json',
		folderAddUrl: '/tank/asset_folders.json',
		folderUpdateUrl: '/tank/asset_folders/',
		folderDeleteUrl: '/tank/asset_folders/delete.json',
		showUnsortedFolder: true,
	}

	constructor(props) {
		super()
		this.state = {
			viewMode: 'grid',
			query: '',
			filters: [],
			globalSearch: false,
			currentFolder: null,
			assetType: null,
			allData: [],
			data: [],
			selectedAssets: [],
			receivedFiles: [],
		}
	}

	handleQueryChange = query => {
		this.setState({ query })
	}

	handleGlobalSearchToggle = checked => {
		this.setState({ globalSearch: checked })
	}

	handleViewModeChange = viewMode => {
		this.setState({ viewMode })
	}

	handleAssetTypeChange = assetType => {
		const filters = [{ property: 'kind', value: assetType }]
		this.setState({ assetType, filters })
	}

	handleFolderChange = currentFolder => {
		if (
			(!this.state.currentFolder && currentFolder) ||
			(this.state.currentFolder && !currentFolder) ||
			(this.state.currentFolder && currentFolder && this.state.currentFolder.id != currentFolder.id)
		) {
			const newState = { currentFolder }
			if (this.state.query !== '' && this.state.query !== null) newState.query = null
			this.setState(newState)
		}
	}

	handleSelectionChange = selectedAssets => {
		this.setState({ selectedAssets })
	}

	handleReceivedFiles = receivedFiles => {
		this.setState({ receivedFiles })
	}

	render() {
		const {
			viewMode,
			query,
			filters,
			globalSearch,
			assetType,
			currentFolder,
			selectedAssets,
			receivedFiles,
		} = this.state
		const toolbarProps = {
			handleReceivedFiles: this.handleReceivedFiles,
		}
		return (
			<MainContent>
				<Bulkhead title="Media" Toolbar={Toolbar} toolbarProps={toolbarProps} />
				<Media
					{...this.props}
					uncontrolled={false}
					allowSelection={true}
					receivedFiles={receivedFiles}
					viewMode={viewMode}
					query={query}
					assetType={assetType}
					filters={filters}
					globalSearch={globalSearch}
					onGlobalSearchToggle={this.handleGlobalSearchToggle}
					onQueryChange={this.handleQueryChange}
					onViewModeChange={this.handleViewModeChange}
					onAssetTypeChange={this.handleAssetTypeChange}
					currentFolderId={currentFolder && currentFolder.id}
					selectedAssets={selectedAssets}
					onFolderChange={this.handleFolderChange}
					onSelectionChange={this.handleSelectionChange}
				/>
			</MainContent>
		)
	}
}