import BlockBody from './block-body';
import {
	getColorObjectByAttributeValues,
	getColorObjectByColorValue
} from 'utils/utility';

const { __ } = wp.i18n;

const {
	Button,
	RangeControl,
	ToggleControl,
	ToolbarGroup,
	ToolbarButton,
	Popover,
	DropdownMenu,
	PanelBody,
	SelectControl
} = wp.components;

const {
	assign
} = lodash;

/**
 * Experimatal controls.
 * @todo Should be replaced when become stable
 */
const UnitControl = wp.components.__experimentalUnitControl;

const {
	BlockControls,
	useBlockProps,
	InspectorControls,
	MediaUpload,
	MediaUploadCheck,
	ColorPalette,
	useSetting,
	__experimentalPanelColorGradientSettings,
} = wp.blockEditor;

const {
	Fragment,
	useState
} = wp.element;

const Edit = function( props ) {

	const blockProps = useBlockProps();

	const [ isEditingURL, setIsEditingURL ] = useState( false );
	const [ isSelectingMedia, setIsSelectingMedia ] = useState( false );

	const {
		className,
		attributes,
		setAttributes,
	} = props;

	const layoutOptions = [
		{
			value: 'fullwidth',
			label: __( 'Fullwidth content' ),
		},
		{
			value: 'boxed',
			label: __( 'Boxed content' ),
		},
	];

	const ALLOWED_MEDIA_TYPES = [ 'image/*' ];

	const getHelpText = function() {
		switch ( attributes.layout ) {
			case 'fullwidth':
				return __( 'Stretch section content by section width' );
			case 'boxed':
				return __( 'Limit section content by fixed width' );
		}
	}

	const EMPTY_ARRAY = [];
	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
	const colorValue = getColorObjectByAttributeValues( colors, attributes.background_color, attributes.custom_background_color ).color;

	const backgroundOverlaySettings = [
		{
			label: __( 'Color' ),
			onColorChange: function( value ) {
				// do nothing for falsy values
				if ( ! value ) {
					return;
				}

				const colorObject = getColorObjectByColorValue( colors, value );

				if ( colorObject && colorObject.slug ) {
					setAttributes({
						background_color: colorObject.slug,
						custom_background_color: '',
					});
				} else {
					setAttributes({
						background_color: '',
						custom_background_color: value,
					});
				}
			},
			colorValue: colorValue,
		}
	]

	const backgroundPostions = [
		{
			value: 'top left',
			label: __( 'Top left' ),
		},
		{
			value: 'top center',
			label: __( 'Top center' ),
		},
		{
			value: 'top right',
			label: __( 'Top right' ),
		},
		{
			value: 'center left',
			label: __( 'Center left' ),
		},
		{
			value: 'center',
			label: __( 'Center' ),
		},
		{
			value: 'center right',
			label: __( 'Center right' ),
		},
		{
			value: 'bottom left',
			label: __( 'Bottom left' ),
		},
		{
			value: 'bottom center',
			label: __( 'Bottom center' ),
		},
		{
			value: 'bottom right',
			label: __( 'Bottom right' ),
		},
	];

	const backgroundRepeats = [
		{
			value: 'repeat',
			label: __( 'Repeat' ),
		},
		{
			value: 'no-repeat',
			label: __( 'No repeat' ),
		},
		{
			value: 'repeat-x',
			label: __( 'Repeat horizontally' ),
		},
		{
			value: 'repeat-y',
			label: __( 'Repeat vertically' ),
		},
	];

	const backgroundSizes = [
		{
			value: 'auto',
			label: __( 'Auto' ),
		},
		{
			value: 'contain',
			label: __( 'Contain' ),
		},
		{
			value: 'cover',
			label: __( 'Cover' ),
		},
	];

	return (
		<div { ...useBlockProps() }>
			<Fragment>
				<InspectorControls
					key={ className + '-inspector' }
				>
					<PanelBody
						title={ __( 'General', 'jet-engine' ) }
					>
						<SelectControl
							label={ __( 'Layout' ) }
							help={ getHelpText() }
							value={ attributes.layout }
							options={ layoutOptions }
							onChange={ newValue => {
								setAttributes({
									layout: newValue,
								});
							} }
						/>
						{ 'boxed' === attributes.layout && <Fragment>
							<UnitControl
								units={ [
									{
										value: 'px',
										label: 'px',
									},
									{
										value: '%',
										label: '%',
									},
									{
										value: 'vh',
										label: 'vh',
									},
								] }
								label={ __( 'Width' ) }
								value={ attributes.content_width }
								onChange={ newValue => {
									setAttributes({
										content_width: newValue,
									});
								} }
							/><br/>
						</Fragment> }
					</PanelBody>
					<PanelBody
						title={ __( 'Background Image', 'jet-engine' ) }
					>
						<MediaUploadCheck>
							{ attributes.background_image_url && <img
								src={ attributes.background_image_url }
							/>
							}
							<MediaUpload
								onSelect={ ( media ) => {
									setAttributes( {
										background_image_url: media.url,
										background_image_id: media.id,
									} )
								} }
								allowedTypes={ ALLOWED_MEDIA_TYPES }
								value={ attributes.background_image }
								render={ ( { open } ) => (
									<div>
										<br/>
										<div style={ {
											display: 'flex',
											justifyContent: 'space-between',
										} }>
											<Button
												onClick={ () => {
													setIsSelectingMedia( true );
													open();
												} }
												isSecondary={ true }
											>{ __( 'Select or upload image' ) }</Button>
											{ attributes.background_image_url && <Button
												onClick={ () => {
													setAttributes( {
														background_image_url: null,
														background_image_id: 0,
													} );
												} }
												isDestructive={ true }
											>{ __( 'Reset' ) }</Button> }
										</div>
									</div>
								) }
							/>
						</MediaUploadCheck>
						{ ( attributes.background_image_url || attributes.background_image_id ) && <Fragment>
							<br/>
							<SelectControl
								label={ __( 'Inserted Image Size' ) }
								help={ __( 'Defines actual size of the image' ) }
								value={ attributes.background_settings.image_size }
								options={ window.JetEngineListingData.imageSizes }
								onChange={ ( newValue ) => {
									setAttributes({
										background_settings: assign(
											{},
											attributes.background_settings,
											{ image_size: newValue }
										)
									});
								}}
							/>
							<SelectControl
								label={ __( 'Background Position' ) }
								value={ attributes.background_settings.background_position }
								options={ backgroundPostions }
								onChange={ ( newValue ) => {
									setAttributes({
										background_settings: assign(
											{},
											attributes.background_settings,
											{ background_position: newValue }
										)
									});
								}}
							/>
							<SelectControl
								label={ __( 'Background Repeat' ) }
								value={ attributes.background_settings.background_repeat }
								options={ backgroundRepeats }
								onChange={ ( newValue ) => {
									setAttributes({
										background_settings: assign(
											{},
											attributes.background_settings,
											{ background_repeat: newValue }
										)
									});
								}}
							/>
							<SelectControl
								label={ __( 'Background Size' ) }
								value={ attributes.background_settings.background_size }
								help={ __( 'Defines size of the image related to the container' ) }
								options={ backgroundSizes }
								onChange={ ( newValue ) => {
									setAttributes({
										background_settings: assign(
											{},
											attributes.background_settings,
											{ background_size: newValue }
										)
									});
								}}
							/>
						</Fragment>}
					</PanelBody>
					<__experimentalPanelColorGradientSettings
						title={ __( 'Bacground Color' ) }
						initialOpen={ false }
						disableCustomGradients={ true }
						settings={ backgroundOverlaySettings }
					></__experimentalPanelColorGradientSettings>
				</InspectorControls>
				<BlockBody
					attributes={ attributes }
					blockProps={ blockProps }
					isEdit={ true }
					className={ className }
				/>
			</Fragment>
		</div>
	);
}

export default Edit;
