import React from 'react';
import classnames from 'classnames';
import { connect } from 'react-redux'; // https://react-redux.js.org/introduction/quick-start
import DesignsImporter from './designs-importer.jsx';

const { Fragment } = wp.element;
const { Dashicon } = wp.components;

// https://github.com/WordPress/gutenberg/blob/3450273fe7522101e3809b270c80a7b9a3ebcf3a/packages/compose/src/with-state/README.md
// import { withState } from '@wordpress/compose';
const { __, sprintf } = wp.i18n;

class UpsellPanel extends React.Component {
	render() {
		const { importedSets, errorMessage, designsCount } = this.props;
		return (
			<Fragment>
				{ -1 === importedSets.indexOf( 'premium' ) && (
					<div
						className={ classnames( 'design-upsell', { centered: ! designsCount } ) }
					>
						<h3 className="design-upsell__header">
							{ designsCount ?
								sprintf(
									__( 'There are %s designs ready to use in your library.' ),
									designsCount
								) :
								__( 'Hello, you have no designs imported.' ) }
						</h3>

						<ul>
							<li className="design-upsell__item design-library__basic">
								{ -1 === importedSets.indexOf( 'basic' ) && (
									<DesignsImporter getLibrary={ this.props.getLibrary } />
								) }
								{ -1 !== importedSets.indexOf( 'basic' ) && (
									<span>
										<Dashicon icon="yes" /> { __( 'Free designs imported' ) }
									</span>
								) }
							</li>
							{ -1 !== importedSets.indexOf( 'basic' ) && (
								<li className="design-upsell__item">
									<a
										href="https://wpdesignhub.com/free/?utm_source=plugin-ui&utm_medium=sidebar&utm_campaign=installer-step-free&utm_campaign=installer-step-free"
										target="_blank"
										rel="noreferrer noopener"
									>
										<Dashicon icon="awards" /> { __( 'Get +50 designs for free' ) }
									</a>
								</li>
							) }
							<li className="design-upsell__item">
								{ -1 !== importedSets.indexOf( 'basic' ) &&
									! this.props.userStatus && (
									<a
										href="https://wpdesignhub.com/pro/?utm_source=plugin-ui&utm_medium=sidebar&utm_campaign=installer-step-pro&utm_campaign=installer-step-pro"
										target="_blank"
										rel="noreferrer noopener"
									>
										<Dashicon icon="unlock" />{ ' ' }
										{ __( 'Get pro subscription, 80% OFF' ) }
									</a>
								) }
								{ this.props.userStatus &&
									-1 !== importedSets.indexOf( 'basic' ) &&
									-1 === importedSets.indexOf( 'premium' ) && (
									<DesignsImporter getLibrary={ this.props.getLibrary } />
								) }
								{ -1 !== importedSets.indexOf( 'premium' ) &&
									this.props.userStatus && (
									<span>
										<Dashicon icon="yes" /> { __( 'Premium designs imported' ) }
									</span>
								) }
							</li>
						</ul>

						{ errorMessage && (
							<div className="design-upsell__errors">
								<p>{ errorMessage }</p>
							</div>
						) }
					</div>
				) }
			</Fragment>
		);
	}
}

export default connect(
	// mapStateToProps
	state => ( {
		designsCount: state.designs.designsCount,
		userStatus: state.user.status,
		importedSets: state.designs.importedSets,
	} ),
	//mapDispatchToProps
	// dispatch => ( {} )
)( UpsellPanel );

// export default Designs