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

import React, { Component } from 'react'
import { createValue, Fieldset } from '@bigfishtv/react-forms'
import _set from 'lodash/set'

import Modal from './Modal'
import Button from '../button/Button'
import Field from '../form/Field'
import CheckboxGroup from '../input/CheckboxGroup'
import DateTimeInput from '../input/DateTimeInput'
import SwitchInput from '../input/SwitchInput'
import { formatDate, getTimeRange, inTimeRange } from '../../utils/timeUtils'

export default class SectionsPublishModal extends Component {
	static defaultProps = {
		title: 'Update Section(s) Publish Settings',
		multiple: true,
	}

	constructor(props) {
		super(props)
		const value = {
			publish_date: props.formValue.value.publish_date,
			expiry_date: props.formValue.value.expiry_date,
			enabled: props.formValue.value.enabled,
		}
		this.state = {
			paths: [props.formValue.keyPath.join('.')],
			formValue: createValue({ value, onChange: this.onChange }),
		}
		const relativeKeyPath = props.formValue.keyPath.slice(0, -2)
		this.sectionOptions = props.sections.map(({ section, sectionType, index }) => {
			const { enabled, publish_date, expiry_date } = section
			console.log(publish_date, expiry_date, inTimeRange(publish_date, expiry_date))
			let textColor = ''
			let subtitle = ''
			if (!enabled) textColor = 'text-error'
			else if (publish_date || expiry_date)
				textColor = inTimeRange(publish_date, expiry_date) ? 'text-success' : 'text-warning'
			if (publish_date && !expiry_date) subtitle = `From ${formatDate(publish_date)}`
			else if (!publish_date && expiry_date) subtitle = `Until ${formatDate(expiry_date)}`
			else if (publish_date && expiry_date) subtitle = `From ${getTimeRange(section.publish_date, section.expiry_date)}`
			return {
				value: [...relativeKeyPath, sectionType.property, index].join('.'),
				text: (
					<span className={textColor}>
						{section.title || section.name || section.label || sectionType.title + ' Section'}
						{subtitle && (
							<small>
								<strong>
									<br />
									{subtitle}
								</strong>
							</small>
						)}
					</span>
				),
			}
		})
	}

	onChange = formValue => this.setState({ formValue })

	handleSubmit = () => {
		const value = this.state.formValue.value
		const rootFormValue = this.props.formValue.root
		let newRootValue = rootFormValue.value
		for (let path of this.state.paths) {
			const item = rootFormValue.select(path).value || {}
			_set(newRootValue, path, { ...item, ...value })
		}
		rootFormValue.update(newRootValue)
		this.handleClose()
	}

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

	render() {
		const { title, multiple } = this.props
		return (
			<Modal
				size="large"
				title={title}
				onClose={() => this.props.closeModal()}
				ModalActions={props => (
					<div>
						<Button text="Save" style="primary" onClick={this.handleSubmit} />
						<Button text="Cancel" onClick={this.handleClose} />
					</div>
				)}>
				<div className="flex">
					{multiple && (
						<div className="flex-1-1-auto" style={{ overflow: 'auto', maxHeight: 465 }}>
							<div className="form-field">
								<label>Update the following sections:</label>
								<CheckboxGroup
									options={this.sectionOptions}
									value={this.state.paths}
									onChange={paths => this.setState({ paths })}
								/>
							</div>
						</div>
					)}
					<div className="flex-1-0-auto" style={multiple ? { width: 120 } : {}}>
						<Fieldset formValue={this.state.formValue}>
							<Field select="enabled" label="Published" Input={SwitchInput} />
							<Field select="publish_date">
								<DateTimeInput maxDate={this.state.formValue.value.expiry_date} />
							</Field>
							<Field select="expiry_date">
								<DateTimeInput minDate={this.state.formValue.value.publish_date} />
							</Field>
						</Fieldset>
					</div>
				</div>
			</Modal>
		)
	}
}