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

import React, { Component } from 'react'
import { withFormValue } from '@bigfishtv/react-forms'
import { connect } from 'react-redux'

import newId from '../../utils/newId'
import MainContent from '../container/MainContent'
import Button from '../button/Button'
import Icon from '../Icon'
import Panel from '../container/panel/Panel'
import Breadcrumb from '../breadcrumb/Breadcrumb'
import Switch from '../input/SwitchInput'
import RadioGroup from '../input/RadioGroupInput'
import EditForm from '../form/EditForm'
import AutosuggestInput from '../input/AutosuggestInput'
import RepeatableFieldset from '../form/RepeatableFieldset'
import Cell from '../cell/Cell'
import PageModal from '../modal/TreeModal'
import { modalHandler } from '../modal/ModalHost'

import { notifySuccess, notifyFailure } from '../../actions/notifications'

/**
 * Role edit page template
 */
@connect()
export default class RoleEdit extends Component {
	getSubmitUrl(data) {
		if (data.id) {
			return '/tank/roles/edit/' + data.id + '.json'
		} else {
			return '/tank/roles/add.json'
		}
	}

	handleSubmitSuccess = data => {
		this.props.dispatch(notifySuccess('The role has been saved.'))
		history.replaceState(null, null, '/tank/roles/edit/' + data.id)
	}

	handleSubmitError = () => {
		this.props.dispatch(notifyFailure('The role could not be saved.'))
	}

	render() {
		return (
			<MainContent>
				<EditForm
					{...this.props}
					submitUrl={this.getSubmitUrl}
					onSubmitSuccess={this.handleSubmitSuccess}
					onSubmitError={this.handleSubmitError}>
					<Breadcrumb title="Roles" url="/tank/roles">
						<RoleDetailsPanel />
						<UsersPanel />
					</Breadcrumb>
				</EditForm>
			</MainContent>
		)
	}
}

// @withFormValue
// class PermissionCell extends Component {
// 	render() {
// 		const { alias, model, foreign_key } = this.props.formValue.value
// 		const title = alias
// 		return <Cell title={title} {...this.props} Icon={<Icon name="document" />} editable={false} />
// 	}
// }

const PermissionSwitch = props => <Switch value={props.switchValue} onChange={props.onSwitchChange} />

@withFormValue
class RoleDetailsPanel extends Component {
	handleSwitchChanged(section, value) {
		const formValue = this.props.formValue.select('permissions')
		if (value) {
			const perms = formValue.value || []
			perms.push({ id: newId(), model: section })
			formValue.update(perms)
		} else {
			const val = formValue.value.filter(perm => perm.model != section)
			formValue.update(val)
		}
	}

	handleSectionChange(model, value) {
		const formValue = this.props.formValue.select('permissions')
		if (value == 'specific') {
			switch (model) {
				case 'Tank.AssetFolders':
					this.showSelectAssetFolderModal()
					return
			}
		} else if (value == 'all') {
			const val = formValue.value.filter(perm => !(perm.model == model && perm.foreign_key))
			val.push({ id: newId(), model })
			formValue.update(val)
		}
	}

	handleAssetFolderSelected(assetFolder) {
		const resource = { id: newId(), alias: assetFolder.title, model: 'Tank.AssetFolders', foreign_key: assetFolder.id }
		const formValue = this.props.formValue.select('permissions')
		const perms = (formValue.value || []).filter(perm => !(perm.model == 'Tank.AssetFolders' && !perm.foreign_key))
		perms.push(resource)
		formValue.update(perms)
	}

	showSelectAssetFolderModal() {
		// debugger;
		modalHandler.add({
			Component: PageModal,
			props: {
				title: 'Select a folder',
				url: '/tank/asset_folders.json',
				startCollapsed: false,
				primaryActionText: 'Select Folder',
				filterData: false,
				onSave: assetFolder => this.handleAssetFolderSelected(assetFolder),
				onClose: () => {},
			},
		})
	}

	removePermission(section, permId) {
		const formValue = this.props.formValue.select('permissions')
		const perms = formValue.value.filter(perm => perm.id != permId)
		if (perms.filter(perm => perm.model == section).length == 0) {
			perms.push({ id: newId(), model: section })
		}
		formValue.update(perms)
	}

	render() {
		const perms = this.props.formValue.select('permissions').value || []

		const permsMedia = perms.filter(perm => perm.model == 'Tank.AssetFolders').length > 0
		const permsUsers = perms.filter(perm => perm.model == 'Tank.Users').length > 0
		const permsSettings = perms.filter(perm => perm.model == 'Tank.Settings').length > 0

		const specificAssetFolders = perms.filter(perm => perm.model == 'Tank.AssetFolders' && perm.foreign_key)
		const specificAssetFoldersVal = specificAssetFolders.length > 0 ? 'specific' : 'all'

		return (
			<div>
				<Panel
					title="Assets"
					PanelToolbar={PermissionSwitch}
					collapsed={!permsMedia}
					switchValue={permsMedia}
					onSwitchChange={value => this.handleSwitchChanged('Tank.AssetFolders', value)}>
					<RadioGroup
						value={specificAssetFoldersVal}
						options={[{ value: 'all', text: 'All folders' }, { value: 'specific', text: 'Limit to folders' }]}
						onChange={value => this.handleSectionChange('Tank.AssetFolders', value)}
					/>
					{specificAssetFolders.map(perm => (
						<Cell
							key={perm.id}
							title={perm.alias}
							editable={false}
							onRemove={() => this.removePermission('Tank.AssetFolders', perm.id)}
						/>
					))}
					{specificAssetFolders.length > 0 && (
						<Button size="small" text="Add" onClick={() => this.showSelectAssetFolderModal()} />
					)}
				</Panel>
				<Panel
					title="Users & Roles"
					PanelToolbar={PermissionSwitch}
					collapsed={!permsUsers}
					switchValue={permsUsers}
					onSwitchChange={value => this.handleSwitchChanged('Tank.Users', value)}>
					<p className="form-message">Full access to all users and roles</p>
				</Panel>
				<Panel
					title="Settings"
					PanelToolbar={PermissionSwitch}
					collapsed={!permsSettings}
					switchValue={permsSettings}
					onSwitchChange={value => this.handleSwitchChanged('Tank.Settings', value)}>
					<p className="form-message">Full access to redirects and global settings.</p>
				</Panel>
			</div>
		)
	}
}

@withFormValue
class UserCell extends Component {
	render() {
		const { first_name, last_name, email } = this.props.formValue.value
		const title = first_name + ' ' + last_name + ' (' + email + ')'
		return <Cell title={title} {...this.props} Icon={<Icon name="profile" />} editable={false} />
	}
}

function addUser(rootFormValue, user) {
	const formValue = rootFormValue.select('users')
	const users = formValue.value || []
	users.push(user)
	formValue.update(users)
}

function collectUserIds(rootFormValue) {
	return (rootFormValue.select('users').value || []).map(user => user.id)
}

const UsersPanel = withFormValue(props => (
	<Panel title="Users with this Role" uncontrolled>
		<AutosuggestInput
			placeholder="Search for users..."
			queryUrl="/tank/users/search.json"
			params={{ exclude: collectUserIds(props.formValue) }}
			autoCache={false}
			renderSuggestion={suggestion => (
				<div>
					{suggestion.first_name + ' ' + suggestion.last_name}
					<small className="truncate">{suggestion.email}</small>
				</div>
			)}
			onChange={user => addUser(props.formValue, user)}
		/>
		<RepeatableFieldset select="users" Item={UserCell} />
	</Panel>
))