import { createElement, Component } from '@wordpress/element'
import { __ } from 'ct-i18n'
import classnames from 'classnames'
import pluginsService from '../services/premium-plugins'
import pluginsActionsService from '../services/premium-plugins-actions'
import SinglePremiumPlugin from '../components/SinglePremiumPlugin'

let plugins_status = null

export default class RecommendedPlugins extends Component {
	state = {
		isLoading: !plugins_status,
		plugins_status: plugins_status || []
	}

	syncPlugins = (verbose = false) => {
		if (verbose) {
			this.setState({ isLoading: true })
		}

		return pluginsActionsService
			.sync()
			.then(({ success, data }) => {
				success && this.setState({ plugins_status: data })
				plugins_status = data
			})
			.always(() => this.setState({ isLoading: false }))
	}

	componentDidMount() {
		this.syncPlugins(!plugins_status)
	}

	render() {
		const plugins = pluginsService.pluginsWithNames()

		return (
			<div className="ct-recommended-plugins">
				{this.state.isLoading && (
					<p className="ct-loading-text">
						{__('Loading Plugins Status...')}
					</p>
				)}

				{!this.state.isLoading &&
					plugins.length > 0 && (
						<ul>
							{plugins.map(plugin => (
								<SinglePremiumPlugin
									plugin={plugin}
									key={plugin.name}
									onPluginsSync={() => this.syncPlugins()}
									status={
										(
											this.state.plugins_status.find(
												({ name }) =>
													name === plugin.name
											) || {}
										).status
									}
								/>
							))}
						</ul>
					)}
			</div>
		)
	}
}