components/layout/JcuEnvironmentBanner.tsx

import * as React from 'react'
import { Close, Hide } from 'grommet-icons'

import { Box, Button, Heading, Markdown, Text } from 'grommet'

import styled from 'styled-components'
import { AppWidthBox } from './AppWidthBox'

const ColouredMarkdown = styled(Markdown)`
	color: rgba(255, 255, 255, 0.85);
	a {
		color: white;
	}
`

type JcuEnvironmentBannerProps = {
	env: any // TODO: Find what this is supposed to be and make an object
}

type JcuEnvironmentBannerState = {
	hover: boolean
	open: boolean
	killed: boolean
}

/**
 * JcuEnvironmentBanner
 *
 * Ctrl-click to kill it
 *
 * @component
 * @category Extras
 */
export class JcuEnvironmentBanner extends React.Component<JcuEnvironmentBannerProps, JcuEnvironmentBannerState> {
	constructor(props: JcuEnvironmentBannerProps) {
		super(props)
		this.state = {
			hover: false,
			open: false,
			killed: false
		}
	}

	render() {
		let description = `This application is running in the ${this.props.env.name}.`
		if (this.props.env.type !== 'prod') {
			description = description + ' It is not suitable for production use.'
		}

		let killButton = <Button
			fill={false}
			hoverIndicator
			size="small"
			title="hide completely (ctrl+click)"
			onClick={() => this.setState({ killed: true })}
			icon={<Hide color="#ffffff" />}
		/>

		description = this.props.env.description || description

		const buildId = <Text size="small" color="white" style={{float: "right", opacity:"0.5"}}>
			{process.env.REACT_APP_CI_BUILD && decodeURIComponent(process.env.REACT_APP_CI_BUILD)}
		</Text>

		let bannerContent = (
			<Box pad={{ bottom: 'medium' }}>
				<ColouredMarkdown>{description}</ColouredMarkdown>
				<div>{buildId}{killButton}</div>
			</Box>
		)

		let closeButton = (
			<Box margin={{ vertical: 'small' }} alignSelf={'start'} width={'30px'} height={'30px'}>
				<Button onClick={() => this.setState({ open: false })}>
					<Close color="#ffffff" />
				</Button>
			</Box>
		)

		if (this.state.killed) {
			return null
		}

		if (this.props.env.type !== 'prod') {
			const hov = this.state.hover || this.state.open ? '2222' : '1111'
			return (
				<AppWidthBox
					onClick={(e) => {
						if (e.ctrlKey) {
							this.setState({ killed: true })
						}
						if (!this.state.open) {
							this.setState({ open: true })
						}
					}}
					onMouseEnter={() => this.setState({ hover: true })}
					onMouseLeave={() => this.setState({ hover: false })}
					style={{
						cursor: !this.state.open ? 'pointer' : '',
						backgroundColor: '#66'+hov,
						backgroundImage: 'repeating-linear-gradient(45deg, transparent 20px, transparent 40px, #77'+hov+' 40px, #77'+hov+' 60px)'
					}}
				>
					<Box direction="row">
						<Box alignSelf="start" fill>
							<Heading
								margin={{ vertical: 'small' }}
								style={{
									color: 'white',
									textDecoration: 'none',
									maxWidth: '100%'
								}}
								level={this.state.open ? '2' : '6'}
							>
								{this.props.env.name}
								{this.state.open || buildId}
							</Heading>
							{this.state.open && bannerContent}
						</Box>
						{this.state.open && closeButton}
					</Box>
				</AppWidthBox>
			)
		} else {
			return <></>
		}
	}
}