import { createElement, Component } from '@wordpress/element'
import pluginsActionsService from '../services/premium-plugins-actions.js'
import { __, sprintf } from 'ct-i18n'

export default class SinglePremiumPlugin extends Component {
	state = { isLoading: false }

	makeAction = action => () => {
		this.setState({ isLoading: true })

		action(this.props.plugin.name)
			.then(
				({ success }) => (success || true) && this.props.onPluginsSync()
			)
			.always(() =>
				setTimeout(() => this.setState({ isLoading: false }), 1000)
			)
	}

	deactivate = this.makeAction(pluginsActionsService.performDeactivation)
	download = this.makeAction(pluginsActionsService.performDownload)
	activate = this.makeAction(pluginsActionsService.performActivation)
	deletion = this.makeAction(pluginsActionsService.performDeletion)

	render() {
		const { isLoading } = this.state
		const { status, plugin } = this.props

		return (
			<li>
				<img src={plugin.thumb} alt="" />
				<div className="ct-plugin-meta">
					<h4>{plugin.title}</h4>
					{plugin.author && (
						<span
							dangerouslySetInnerHTML={{
								__html: sprintf(
									// translators: plugin author
									__('By %s'),
									`<a href="${plugin.author_uri}">${
										plugin.author
									}</a>`
								)
							}}
						/>
					)}
				</div>

				{plugin.description && <p>{plugin.description}</p>}

				<div className="ct-plugin-controls">
					{isLoading && <span className="ct-loading" />}

					{!isLoading &&
						status === 'activated' && (
							<a
								onClick={() => this.deactivate()}
								className="ct-button deactivate-btn">
								{__('Deactivate')}
							</a>
						)}

					{!isLoading &&
						status === 'deactivated' && (
							<a
								onClick={() => this.activate()}
								className="ct-button">
								{__('Activate')}
							</a>
						)}

					{!isLoading &&
						status === 'uninstalled' &&
						!plugin.comingsoon && (
							<a
								onClick={() => this.download()}
								className="ct-button">
								{__('Install')}
							</a>
						)}

					{!isLoading &&
						status === 'uninstalled' &&
						plugin.comingsoon && (
							<span className="ct-badge">
								{__('COMING SOON')}
							</span>
						)}
				</div>
			</li>
		)
	}
}