import { createElement, Component } from '@wordpress/element'
import { __ } from 'ct-i18n'
import classnames from 'classnames'
import { Transition } from 'react-spring'

import { Dialog, DialogOverlay, DialogContent } from '@reach/dialog'
import '@reach/dialog/styles.css'
import Tooltip from '../components/Tooltip'

import fileSaver from 'file-saver'

const upperCase = val => (val ? val.toUpperCase() : val)

let systemStatusData = null

export default class SystemStatus extends Component {
	state = {
		isLoading: !systemStatusData,
		systemStatusData: systemStatusData || {},
		showDialog: false
	}

	componentDidMount() {
		wp.ajax.post('ct_load_system_status').then(data => {
			this.setState({ isLoading: false, systemStatusData: data })
			systemStatusData = data
		})
	}

	performDownload() {
		var blob = new Blob(
			[
				JSON.stringify(
					{
						...this.state.systemStatusData,
						browser_info: jQuery.browser
					},
					null,
					'  '
				)
			],
			{
				type: 'text/plain;charset=utf-8'
			}
		)

		let date = new Date()

		let year = date.getFullYear()
		let month = date.getMonth()
		let day = date.getDate()
		let hour = date.getHours()
		let minutes = date.getMinutes()

		const filename = `ct-system-status-${year}-${month}-${day}-${hour}-${minutes}.json.txt`

		fileSaver.saveAs(blob, filename)

		this.setState({ showDialog: false })
	}

	render() {
		return (
			<section className="ct-system-status">
				{this.state.isLoading && (
					<p>{__('Collecting System Status...')}</p>
				)}

				{!this.state.isLoading && (
					<div>
						<div className="ct-info">
							<i />

							<p>
								{__(
									'Download the system report file by clicking this button and send it to us in case you have problems.'
								)}
							</p>
							<a
								tabIndex="-1"
								onClick={() =>
									this.setState({ showDialog: true })
								}
								className="ct-button">
								{__('Get System Report')}
							</a>
						</div>

						{Object.values(this.state.systemStatusData).map(
							(group, i) => (
								<div key={i} className="ct-system-status-group">
									<h3>{upperCase(group.title)}</h3>

									<ul>
										{Object.values(group.options).map(
											(entry, ii) => (
												<li
													key={ii}
													className={classnames({
														[`ct-system-status-entry`]: true,
														success: entry.success,
														error: !entry.success
													})}>
													<span className="ct-validity-badge" />
													<p className="ct-entry-title">
														{entry.title}
													</p>

													<p className="ct-entry-value">
														{entry.value}
														{entry.message &&
															entry.doc && (
																<span>
																	<a
																		target="_blank"
																		href={
																			entry.doc
																		}>
																		{
																			entry.text
																		}
																	</a>
																</span>
															)}
													</p>

													<Tooltip
														placement="top"
														tooltip={entry.desc}>
														<i
															title={entry.desc}
															className={classnames(
																{
																	[`ct-system-status-help`]: true
																}
															)}>
															<svg
																width="15"
																height="15"
																viewBox="0 0 15 15">
																<path d="M7.5,0C3.4,0,0,3.4,0,7.5S3.4,15,7.5,15S15,11.6,15,7.5S11.6,0,7.5,0z M8.5,11c0,0.6-0.4,1-1,1s-1-0.4-1-1V7.5  c0-0.6,0.4-1,1-1s1,0.4,1,1V11z M7.5,5.6c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1s1.1,0.5,1.1,1.1S8.1,5.6,7.5,5.6L7.5,5.6z" />
															</svg>
														</i>
													</Tooltip>
												</li>
											)
										)}
									</ul>
								</div>
							)
						)}

						<Transition
							items={this.state.showDialog}
							config={{ duration: 300 }}
							from={{ opacity: 0, y: -10 }}
							enter={{ opacity: 1, y: 0 }}
							leave={{ opacity: 0, y: 10 }}>
							{showDialog =>
								showDialog &&
								(props => (
									<DialogOverlay
										style={{ opacity: props.opacity }}
										onDismiss={() =>
											this.setState({
												showDialog: false
											})
										}>
										<DialogContent
											style={{
												transform: `translate3d(0px, ${
													props.y
												}px, 0px)`
											}}>
											<h3>{__('System Report')}</h3>

											<p>
												{__(
													'Download your system report file'
												)}
											</p>

											<a
												onClick={() =>
													this.performDownload()
												}
												className="ct-button">
												{__('Download')}
											</a>
										</DialogContent>
									</DialogOverlay>
								))
							}
						</Transition>
					</div>
				)}
			</section>
		)
	}
}