/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { PanelBody, BaseControl } from '@wordpress/components';
import { compose } from '@wordpress/compose';
import {
	InspectorControls,
	BlockControls,
	AlignmentToolbar,
	withColors,
	ColorPalette,
	FontSizePicker,
	withFontSizes,
} from '@wordpress/block-editor';
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
/**
 * Internal dependencies
 */
import Block from './block';
import withProductSelector from '../shared/with-product-selector';
import { BLOCK_TITLE, BLOCK_ICON } from './constants';

const TextControl = ( {
	fontSize,
	setFontSize,
	color,
	setColor,
	colorLabel,
} ) => (
	<>
		<FontSizePicker value={ fontSize.size } onChange={ setFontSize } />
		{ /* ColorPalette doesn't accept an id. */
		/* eslint-disable-next-line @wordpress/no-base-control-with-label-without-id */ }
		<BaseControl label={ colorLabel }>
			<ColorPalette
				value={ color.color }
				onChange={ setColor }
				label={ __( 'Color', 'woocommerce' ) }
			/>
		</BaseControl>
	</>
);
const PriceEdit = ( {
	fontSize,
	saleFontSize,
	setFontSize,
	setSaleFontSize,
	color,
	saleColor,
	setColor,
	setSaleColor,
	attributes,
	setAttributes,
} ) => {
	const { align } = attributes;
	return (
		<>
			{ isFeaturePluginBuild() && (
				<BlockControls>
					<AlignmentToolbar
						value={ align }
						onChange={ ( nextAlign ) => {
							setAttributes( { align: nextAlign } );
						} }
					/>
				</BlockControls>
			) }
			<InspectorControls>
				{ isFeaturePluginBuild() && (
					<>
						<PanelBody
							title={ __(
								'Price',
								'woocommerce'
							) }
						>
							<TextControl
								color={ color }
								setColor={ setColor }
								fontSize={ fontSize }
								setFontSize={ setFontSize }
								colorLabel={ __(
									'Color',
									'woocommerce'
								) }
							/>
						</PanelBody>
						<PanelBody
							title={ __(
								'Sale price',
								'woocommerce'
							) }
						>
							<TextControl
								color={ saleColor }
								setColor={ setSaleColor }
								fontSize={ saleFontSize }
								setFontSize={ setSaleFontSize }
								colorLabel={ __(
									'Color',
									'woocommerce'
								) }
							/>
						</PanelBody>
					</>
				) }
			</InspectorControls>
			<Block { ...attributes } />
		</>
	);
};

const Price = isFeaturePluginBuild()
	? compose( [
			withFontSizes( 'fontSize' ),
			withFontSizes( 'saleFontSize' ),
			withFontSizes( 'originalFontSize' ),
			withColors( 'color', { textColor: 'color' } ),
			withColors( 'saleColor', { textColor: 'saleColor' } ),
			withColors( 'originalColor', { textColor: 'originalColor' } ),
			withProductSelector( {
				icon: BLOCK_ICON,
				label: BLOCK_TITLE,
				description: __(
					'Choose a product to display its price.',
					'woocommerce'
				),
			} ),
	  ] )( PriceEdit )
	: PriceEdit;

export default Price;
