import React from 'react';
const { Fragment } = wp.element;
const { Dashicon, Button } = wp.components;

const { __ } = wp.i18n;

export default class ImportDesignsButton extends React.Component {
	render() {
		const { importedSets } = this.props;
		return (
			<Fragment>
				{ -1 === importedSets.indexOf( 'basic' ) && (
					<Button
						className="design-upsell__cta dsgn__library-import-free"
						ref={ x => ( this._button_free_desings = x ) }
						isBusy={ this.props.importing }
						isLarge
						isPrimary
						onClick={ () => {
							this._button_free_desings.blur(); // Loading animation isn't working without blur.
							this.props.importDesigns( 'basic' );
						} }
					>
						<Dashicon icon="download" /> { __( 'Import 50 free designs' ) }
					</Button>
				) }
				{ -1 !== importedSets.indexOf( 'basic' ) &&
					this.props.userStatus &&
					-1 === importedSets.indexOf( 'premium' ) && (
					<Button
						className="design-upsell__cta dsgn__library-import-premium"
						isBusy={ this.props.importing }
						isLarge
						isPrimary
						ref={ x => ( this._button_premium_desings = x ) }
						onClick={ () => {
							this._button_premium_desings.blur(); // Loading animation isn't working without blur.
							this.props.importDesigns( 'premium' );
						} }
					>
						<Dashicon icon="download" /> { __( 'Import premium designs' ) }
					</Button>
				) }
				{ this.props.importing && (
					<div className="dsgn__import-progress-bar">
						<div style={ { width: this.props.progress + '%' } } />{ ' ' }
					</div>
				) }
			</Fragment>
		);
	}
}