text: /**
   * External dependencies
   */
  import { __ } from '@wordpress/i18n';
  import { createInterpolateElement } from 'wordpress-element';
  import {
  	Notice,
  	ToggleControl,
  	ToolbarGroup,
  	RangeControl,
  	SelectControl,
  } from '@wordpress/components';
  import { BlockControls } from '@wordpress/block-editor';
  import { getAdminLink, getSetting } from '@woocommerce/settings';
  import ToggleButtonControl from '@woocommerce/editor-components/toggle-button-control';
  
  export const getBlockControls = ( editMode, setAttributes ) => (
  	<BlockControls>
  		<ToolbarGroup
  			controls={ [
  				{
  					icon: 'edit',
  					title: __( 'Edit', 'woocommerce' ),
  					onClick: () => setAttributes( { editMode: ! editMode } ),
  					isActive: editMode,
  				},
  			] }
  		/>
  	</BlockControls>
  );
  
  export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
  	const showAvatars = getSetting( 'showAvatars', true );
  	const reviewRatingsEnabled = getSetting( 'reviewRatingsEnabled', true );
  	return (
  		<>
  			<ToggleControl
  				label={ __( 'Product rating', 'woocommerce' ) }
  				checked={ attributes.showReviewRating }
  				onChange={ () =>
  					setAttributes( {
  						showReviewRating: ! attributes.showReviewRating,
  					} )
  				}
  			/>
  			{ attributes.showReviewRating && ! reviewRatingsEnabled && (
  				<Notice
  					className="wc-block-base-control-notice"
  					isDismissible={ false }
  				>
  					{ createInterpolateElement(
  						__(
  							'Product rating is disabled in your <a>store settings</a>.',
  							'woocommerce'
  						),
  						{
  							a: (
  								// eslint-disable-next-line jsx-a11y/anchor-has-content
  								<a
  									href={ getAdminLink(
  										'admin.php?page=wc-settings&tab=products'
  									) }
  									target="_blank"
  									rel="noopener noreferrer"
  								/>
  							),
  						}
  					) }
  				</Notice>
  			) }
  			<ToggleControl
  				label={ __( 'Reviewer name', 'woocommerce' ) }
  				checked={ attributes.showReviewerName }
  				onChange={ () =>
  					setAttributes( {
  						showReviewerName: ! attributes.showReviewerName,
  					} )
  				}
  			/>
  			<ToggleControl
  				label={ __( 'Image', 'woocommerce' ) }
  				checked={ attributes.showReviewImage }
  				onChange={ () =>
  					setAttributes( {
  						showReviewImage: ! attributes.showReviewImage,
  					} )
  				}
  			/>
  			<ToggleControl
  				label={ __( 'Review date', 'woocommerce' ) }
  				checked={ attributes.showReviewDate }
  				onChange={ () =>
  					setAttributes( {
  						showReviewDate: ! attributes.showReviewDate,
  					} )
  				}
  			/>
  			<ToggleControl
  				label={ __( 'Review content', 'woocommerce' ) }
  				checked={ attributes.showReviewContent }
  				onChange={ () =>
  					setAttributes( {
  						showReviewContent: ! attributes.showReviewContent,
  					} )
  				}
  			/>
  			{ attributes.showReviewImage && (
  				<>
  					<ToggleButtonControl
  						label={ __(
  							'Review image',
  							'woocommerce'
  						) }
  						value={ attributes.imageType }
  						options={ [
  							{
  								label: __(
  									'Reviewer photo',
  									'woocommerce'
  								),
  								value: 'reviewer',
  							},
  							{
  								label: __(
  									'Product',
  									'woocommerce'
  								),
  								value: 'product',
  							},
  						] }
  						onChange={ ( value ) =>
  							setAttributes( { imageType: value } )
  						}
  					/>
  					{ attributes.imageType === 'reviewer' && ! showAvatars && (
  						<Notice
  							className="wc-block-base-control-notice"
  							isDismissible={ false }
  						>
  							{ createInterpolateElement(
  								__(
  									'Reviewer photo is disabled in your <a>site settings</a>.',
  									'woocommerce'
  								),
  								{
  									a: (
  										// eslint-disable-next-line jsx-a11y/anchor-has-content
  										<a
  											href={ getAdminLink(
  												'options-discussion.php'
  											) }
  											target="_blank"
  											rel="noopener noreferrer"
  										/>
  									),
  								}
  							) }
  						</Notice>
  					) }
  				</>
  			) }
  		</>
  	);
  };
  
  export const getSharedReviewListControls = ( attributes, setAttributes ) => {
  	const minPerPage = 1;
  	const maxPerPage = 20;
  
  	return (
  		<>
  			<ToggleControl
  				label={ __( 'Order by', 'woocommerce' ) }
  				checked={ attributes.showOrderby }
  				onChange={ () =>
  					setAttributes( { showOrderby: ! attributes.showOrderby } )
  				}
  			/>
  			<SelectControl
  				label={ __(
  					'Order Product Reviews by',
  					'woocommerce'
  				) }
  				value={ attributes.orderby }
  				options={ [
  					{ label: 'Most recent', value: 'most-recent' },
  					{ label: 'Highest Rating', value: 'highest-rating' },
  					{ label: 'Lowest Rating', value: 'lowest-rating' },
  				] }
  				onChange={ ( orderby ) => setAttributes( { orderby } ) }
  			/>
  			<RangeControl
  				label={ __(
  					'Starting Number of Reviews',
  					'woocommerce'
  				) }
  				value={ attributes.reviewsOnPageLoad }
  				onChange={ ( reviewsOnPageLoad ) =>
  					setAttributes( { reviewsOnPageLoad } )
  				}
  				max={ maxPerPage }
  				min={ minPerPage }
  			/>
  			<ToggleControl
  				label={ __( 'Load more', 'woocommerce' ) }
  				checked={ attributes.showLoadMore }
  				onChange={ () =>
  					setAttributes( { showLoadMore: ! attributes.showLoadMore } )
  				}
  			/>
  			{ attributes.showLoadMore && (
  				<RangeControl
  					label={ __(
  						'Load More Reviews',
  						'woocommerce'
  					) }
  					value={ attributes.reviewsOnLoadMore }
  					onChange={ ( reviewsOnLoadMore ) =>
  						setAttributes( { reviewsOnLoadMore } )
  					}
  					max={ maxPerPage }
  					min={ minPerPage }
  				/>
  			) }
  		</>
  	);
  };
  