@bigfishtv/cockpit/src/components/modal/AssetSelectModal.js

import React, { Component } from 'react'

import Modal from './Modal'
import Button from '../button/Button'
import AssetFinder from '../asset/AssetFinder'

const ModalActions = props => {
	const { onSave, onClose, selectedAssets } = props.modalActionProps
	const selectText =
		'Select ' +
		(selectedAssets.length ? selectedAssets.length + (selectedAssets.length == 1 ? ' File' : ' Files') : 'Files')
	return (
		<div>
			<Button text={selectText} style="primary" onClick={onSave} disabled={!selectedAssets.length} />
			<Button text="Cancel" onClick={onClose} />
		</div>
	)
}

const SESSION_STORAGE_KEY = 'cockpit-asset-select-modal'

export default class AssetSelectModal extends Component {
	static defaultProps = {
		viewMode: 'grid',
		query: '',
	}

	constructor(props) {
		super()
		const defaultState = {
			viewMode: props.viewMode,
			query: props.query,
			filters: [],
			selectedAssets: [],
			currentFolder: null,
			globalSearch: false,
		}
		const sessionState = sessionStorage.getItem(SESSION_STORAGE_KEY)
		this.state = { ...defaultState, ...(sessionState ? JSON.parse(sessionState) : {}) }
	}

	componentDidUpdate() {
		const stateToSave = { ...this.state }
		delete stateToSave.selectedAssets
		sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave))
	}

	handleFolderChange = currentFolder => {
		if (
			(!this.state.currentFolder && currentFolder) ||
			(this.state.currentFolder && !currentFolder) ||
			(this.state.currentFolder && currentFolder && this.state.currentFolder.id != currentFolder.id)
		) {
			this.setState({ currentFolder })
		}
	}

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

	handleSelection = selectedAssets => {
		this.setState({ selectedAssets }, () => {
			this.handleSave()
		})
	}

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

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

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

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

	handleSave = () => {
		const { selectedAssets } = this.state
		this.props.onFilesSelected(selectedAssets)
		this.props.closeModal()
	}

	handleClose = () => {
		this.props.closeModal()
	}

	render() {
		const { viewMode, query, assetType, filters, globalSearch, selectedAssets, currentFolder } = this.state
		const modalActionProps = {
			onSave: this.handleSave,
			onClose: this.handleClose,
			selectedAssets,
		}
		const defaultFolderId = this.props.defaultAssetFolder ? this.props.defaultAssetFolder.id : null

		return (
			<Modal title="Select Media" {...modalActionProps} ModalActions={ModalActions} modalActionProps={modalActionProps}>
				<AssetFinder
					{...this.props}
					uncontrolled={false}
					negativeHeight={180}
					allowSelection={true}
					viewMode={viewMode}
					assetType={assetType}
					query={query}
					filters={filters}
					globalSearch={globalSearch}
					selectedAssets={selectedAssets}
					currentFolderId={currentFolder && currentFolder.id}
					defaultFolderId={defaultFolderId}
					onSelected={this.handleSelection}
					onGlobalSearchToggle={this.handleGlobalSearchToggle}
					onQueryChange={this.handleQueryChange}
					onFolderChange={this.handleFolderChange}
					onViewModeChange={this.handleViewModeChange}
					onAssetTypeChange={this.handleAssetTypeChange}
					onSelectionChange={this.handleSelectionChange}
				/>
			</Modal>
		)
	}
}