/**
 * Internal dependencies.
 */
import RenderSettingControl from '../../utils/components/settings/renderSettingControl';

const { __ } = wp.i18n;
const { Fragment } = wp.element;
const { SelectControl, ToggleControl } = wp.components;
const { PanelColorSettings } = wp.blockEditor;

export default function ButtonSettings(props) {
	const {
		enableButtonBackgroundColor,
		buttonBackgroundColor,
		onChangeButtonColor = () => {},
		enableButtonTextColor,
		buttonTextColor,
		onChangeButtonTextColor = () => {},
		enableButtonSize,
		buttonSize,
		onChangeButtonSize = () => {},
		enableButtonShape,
		buttonShape,
		onChangeButtonShape = () => {},
		enableButtonTarget,
		buttonTarget,
		onChangeButtonTarget = () => {},
	} = props;

	// Button size values
	const buttonSizeOptions = [
		{
			value: 'gb-button-size-small',
			label: __('Small', 'genesis-blocks'),
		},
		{
			value: 'gb-button-size-medium',
			label: __('Medium', 'genesis-blocks'),
		},
		{
			value: 'gb-button-size-large',
			label: __('Large', 'genesis-blocks'),
		},
		{
			value: 'gb-button-size-extralarge',
			label: __('Extra Large', 'genesis-blocks'),
		},
	];

	// Button shape
	const buttonShapeOptions = [
		{
			value: 'gb-button-shape-square',
			label: __('Square', 'genesis-blocks'),
		},
		{
			value: 'gb-button-shape-rounded',
			label: __('Rounded Square', 'genesis-blocks'),
		},
		{
			value: 'gb-button-shape-circular',
			label: __('Circular', 'genesis-blocks'),
		},
	];

	return (
		<Fragment>
			<RenderSettingControl id="gb_button_buttonOptions">
				{false !== enableButtonTarget && (
					<ToggleControl
						label={__('Open link in new window', 'genesis-blocks')}
						checked={buttonTarget}
						onChange={onChangeButtonTarget}
					/>
				)}
				{false !== enableButtonSize && (
					<SelectControl
						selected={buttonSize}
						label={__('Button Size', 'genesis-blocks')}
						value={buttonSize}
						options={buttonSizeOptions.map(({ value, label }) => ({
							value,
							label,
						}))}
						onChange={onChangeButtonSize}
					/>
				)}
				{false !== enableButtonShape && (
					<SelectControl
						label={__('Button Shape', 'genesis-blocks')}
						value={buttonShape}
						options={buttonShapeOptions.map(({ value, label }) => ({
							value,
							label,
						}))}
						onChange={onChangeButtonShape}
					/>
				)}
				{false !== enableButtonBackgroundColor && (
					<PanelColorSettings
						title={__('Button Color', 'genesis-blocks')}
						initialOpen={false}
						colorSettings={[
							{
								value: buttonBackgroundColor,
								onChange: onChangeButtonColor,
								label: __('Button Color', 'genesis-blocks'),
							},
						]}
					></PanelColorSettings>
				)}
				{false !== enableButtonTextColor && (
					<PanelColorSettings
						title={__('Button Text Color', 'genesis-blocks')}
						initialOpen={false}
						colorSettings={[
							{
								value: buttonTextColor,
								onChange: onChangeButtonTextColor,
								label: __(
									'Button Text Color',
									'genesis-blocks'
								),
							},
						]}
					></PanelColorSettings>
				)}
			</RenderSettingControl>
		</Fragment>
	);
}
