import snarkdown from 'snarkdown'
import { createElement, useState, useEffect } from '@wordpress/element'
import { dateI18n } from '@wordpress/date'
import { __, sprintf } from 'ct-i18n'

let changelog_cache = null

const parseChangelog = changelog =>
	changelog
		.replace(/(\r\n|\r|\n){3,}/g, '$1\n\n')
		.split('\n\n')
		.map(versionDescriptor => {
			let [version, date] = versionDescriptor.split('\n')[0].split(':')

			return {
				version,
				date: dateI18n('F j, Y', new Date(date)),
				descriptor: versionDescriptor
			}
		})

const SingleVersion = ({ versionDescriptor }) => {
	const [_, ...allReleaseChanges] = versionDescriptor.descriptor.split('\n')

	return (
		<div>
			<h2>
				Version: {versionDescriptor.version}{' '}
				<span>Released on {versionDescriptor.date}</span>
			</h2>

			<div
				className="ct-release-info"
				dangerouslySetInnerHTML={{
					__html: snarkdown(allReleaseChanges.join('\n'))
						.replace(
							/New:/g,
							'<span class="new" title="New"></span>'
						)
						.replace(
							/Improvement:/g,
							'<span class="improvement" title="Enhance"></span>'
						)
						.replace(
							/Fix:/g,
							'<span class="fix" title="Fix"></span>'
						)
				}}
			/>
		</div>
	)
}

export default () => {
	const [isLoading, setIsLoading] = useState(!changelog_cache)
	const [changelog, setChangelog] = useState(changelog_cache)

	const syncChangelog = async (verbose = false) => {
		if (verbose) {
			setIsLoading(true)
		}

		const body = new FormData()
		body.append('action', 'get_latest_changelog')

		try {
			const response = await fetch(ctDashboardLocalizations.ajax_url, {
				method: 'POST',
				body
			})

			if (response.status === 200) {
				const { success, data } = await response.json()
				if (success && data.changelog) {
					setChangelog(data.changelog)
					changelog_cache = data.changelog
				}
			}
		} catch (e) {}

		setIsLoading(false)
	}

	useEffect(() => {
		syncChangelog(!changelog_cache)
	}, [])

	return (
		<section className="ct-changelog-wrapper">
			<ul className="changelog-info">
				<li>
					<span className="new" /> New
				</li>
				<li>
					<span className="fix" /> Fix
				</li>
				<li>
					<span className="improvement" /> Enhance
				</li>
			</ul>

			{isLoading
				? __('Loading changelog...')
				: changelog
					? parseChangelog(changelog).map(versionDescriptor => (
							<SingleVersion
								key={versionDescriptor.version}
								versionDescriptor={versionDescriptor}
							/>
						))
					: __('No changelog present at the moment.')}
		</section>
	)
}