@bigfishtv/cockpit/src/components/container/panel/SectionPanel.js

import React, { Component } from 'react'
import cn from 'classnames'
import moment from 'moment'
import _get from 'lodash/get'

import Panel from './Panel'
import { modalHandler } from '../../modal/ModalHost'
import { formatDate, getTimeRange } from '../../../utils/timeUtils'

import SectionsPublishModal from '../../modal/SectionsPublishModal'

export default class SectionPanel extends Component {
	static defaultProps = {
		panelClassName: 'panel',
	}

	handleSectionPublishProperties = () => {
		const { formValue, allSections } = this.props
		const section = formValue.value
		const title =
			(section.title ||
				section.name ||
				section.label ||
				_get(
					allSections.map(({ sectionType }) => sectionType).find(({ property }) => property == formValue.keyPath[0]),
					'title',
					'Section'
				)) + ' - Publish Properties'

		modalHandler.add({
			Component: SectionsPublishModal,
			props: {
				formValue,
				sections: allSections,
				multiple: false,
				title,
			},
		})
	}

	render() {
		const { children, ...props } = this.props
		const { formValue, panelClassName, title } = props
		const { publish_date, expiry_date, enabled } = formValue.value || {}

		let status = 'success'
		let tooltip = ''
		if (!enabled) {
			status = 'error'
			tooltip = 'Disabled'
		} else {
			tooltip = 'Enabled'
			if (publish_date && !expiry_date) {
				if (moment().diff(publish_date) < 0) status = 'warning'
				tooltip += ' from ' + formatDate(publish_date)
			} else if (publish_date && expiry_date) {
				if (moment().diff(publish_date) < 0 || moment().diff(expiry_date) > 0) status = 'warning'
				tooltip += ' from ' + getTimeRange(publish_date, expiry_date)
			}
		}

		const titleNode = (
			<div className="flex">
				<div className="flex-none padding-right-xsmall">
					<span
						data-tooltip={tooltip}
						data-tooltip-direction="right"
						style={{ verticalAlign: 'initial' }}
						onClick={this.handleSectionPublishProperties}>
						<div style={{ cursor: 'pointer', marginRight: '0.5rem' }} className={cn('status', status)} />
					</span>
				</div>
				{title && <div className="flex-1-1-auto">{title}</div>}
			</div>
		)
		const overwriteProps = {
			panelClassName: cn(panelClassName),
			title: titleNode,
		}
		if (!enabled) overwriteProps.collapsed = true
		return (
			<Panel {...props} {...overwriteProps} title={titleNode}>
				{children}
			</Panel>
		)
	}
}