text: /**
   * External dependencies
   */
  import { __ } from '@wordpress/i18n';
  import {
  	BlockControls,
  	InspectorControls,
  	ServerSideRender,
  } from '@wordpress/editor';
  import {
  	Button,
  	Disabled,
  	PanelBody,
  	Placeholder,
  	RangeControl,
  	Toolbar,
  	withSpokenMessages,
  	ToggleControl,
  } from '@wordpress/components';
  import { Component, Fragment } from '@wordpress/element';
  import PropTypes from 'prop-types';
  import { MAX_COLUMNS, MIN_COLUMNS } from '@woocommerce/block-settings';
  import GridContentControl from '@woocommerce/block-components/grid-content-control';
  import { IconWidgets } from '@woocommerce/block-components/icons';
  import ProductsControl from '@woocommerce/block-components/products-control';
  import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
  import { gridBlockPreview } from '@woocommerce/resource-previews';
  
  /**
   * Component to handle edit mode of "Hand-picked Products".
   */
  class ProductsBlock extends Component {
  	getInspectorControls() {
  		const { attributes, setAttributes } = this.props;
  		const {
  			columns,
  			contentVisibility,
  			orderby,
  			alignButtons,
  		} = attributes;
  
  		return (
  			<InspectorControls key="inspector">
  				<PanelBody
  					title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
  					initialOpen
  				>
  					<RangeControl
  						label={ __(
  							'Columns',
  							'woo-gutenberg-products-block'
  						) }
  						value={ columns }
  						onChange={ ( value ) =>
  							setAttributes( { columns: value } )
  						}
  						min={ MIN_COLUMNS }
  						max={ MAX_COLUMNS }
  					/>
  					<ToggleControl
  						label={ __(
  							'Align Buttons',
  							'woo-gutenberg-products-block'
  						) }
  						help={
  							alignButtons
  								? __(
  										'Buttons are aligned vertically.',
  										'woo-gutenberg-products-block'
  								  )
  								: __(
  										'Buttons follow content.',
  										'woo-gutenberg-products-block'
  								  )
  						}
  						checked={ alignButtons }
  						onChange={ () =>
  							setAttributes( { alignButtons: ! alignButtons } )
  						}
  					/>
  				</PanelBody>
  				<PanelBody
  					title={ __( 'Content', 'woo-gutenberg-products-block' ) }
  					initialOpen
  				>
  					<GridContentControl
  						settings={ contentVisibility }
  						onChange={ ( value ) =>
  							setAttributes( { contentVisibility: value } )
  						}
  					/>
  				</PanelBody>
  				<PanelBody
  					title={ __( 'Order By', 'woo-gutenberg-products-block' ) }
  					initialOpen={ false }
  				>
  					<ProductOrderbyControl
  						setAttributes={ setAttributes }
  						value={ orderby }
  					/>
  				</PanelBody>
  				<PanelBody
  					title={ __( 'Products', 'woo-gutenberg-products-block' ) }
  					initialOpen={ false }
  				>
  					<ProductsControl
  						selected={ attributes.products }
  						onChange={ ( value = [] ) => {
  							const ids = value.map( ( { id } ) => id );
  							setAttributes( { products: ids } );
  						} }
  					/>
  				</PanelBody>
  			</InspectorControls>
  		);
  	}
  
  	renderEditMode() {
  		const { attributes, debouncedSpeak, setAttributes } = this.props;
  		const onDone = () => {
  			setAttributes( { editMode: false } );
  			debouncedSpeak(
  				__(
  					'Showing Hand-picked Products block preview.',
  					'woo-gutenberg-products-block'
  				)
  			);
  		};
  
  		return (
  			<Placeholder
  				icon={ <IconWidgets /> }
  				label={ __(
  					'Hand-picked Products',
  					'woo-gutenberg-products-block'
  				) }
  				className="wc-block-products-grid wc-block-handpicked-products"
  			>
  				{ __(
  					'Display a selection of hand-picked products in a grid.',
  					'woo-gutenberg-products-block'
  				) }
  				<div className="wc-block-handpicked-products__selection">
  					<ProductsControl
  						selected={ attributes.products }
  						onChange={ ( value = [] ) => {
  							const ids = value.map( ( { id } ) => id );
  							setAttributes( { products: ids } );
  						} }
  					/>
  					<Button isDefault onClick={ onDone }>
  						{ __( 'Done', 'woo-gutenberg-products-block' ) }
  					</Button>
  				</div>
  			</Placeholder>
  		);
  	}
  
  	render() {
  		const { attributes, name, setAttributes } = this.props;
  		const { editMode } = attributes;
  
  		if ( attributes.isPreview ) {
  			return gridBlockPreview;
  		}
  
  		return (
  			<Fragment>
  				<BlockControls>
  					<Toolbar
  						controls={ [
  							{
  								icon: 'edit',
  								title: __( 'Edit' ),
  								onClick: () =>
  									setAttributes( { editMode: ! editMode } ),
  								isActive: editMode,
  							},
  						] }
  					/>
  				</BlockControls>
  				{ this.getInspectorControls() }
  				{ editMode ? (
  					this.renderEditMode()
  				) : (
  					<Disabled>
  						<ServerSideRender
  							block={ name }
  							attributes={ attributes }
  						/>
  					</Disabled>
  				) }
  			</Fragment>
  		);
  	}
  }
  
  ProductsBlock.propTypes = {
  	/**
  	 * The attributes for this block
  	 */
  	attributes: PropTypes.object.isRequired,
  	/**
  	 * The register block name.
  	 */
  	name: PropTypes.string.isRequired,
  	/**
  	 * A callback to update attributes
  	 */
  	setAttributes: PropTypes.func.isRequired,
  	// from withSpokenMessages
  	debouncedSpeak: PropTypes.func.isRequired,
  };
  
  export default withSpokenMessages( ProductsBlock );
  