import React from 'react';
import './editor.scss';
import { TextControl, Flex, FlexItem } from '@wordpress/components';
import {
	useBlockProps,
	InspectorControls,
} from '@wordpress/block-editor';


export default function Edit( { attributes, setAttributes } ) {
	const onChangeCustomWidth = ( widthUpdated ) => {
		setAttributes( { custom_size_width: widthUpdated } );
	};

	const onChangeCustomHeight = ( heightUpdated ) => {
		setAttributes( { custom_size_height: heightUpdated } );
	};

	return (
		<div { ...useBlockProps() }>
			<InspectorControls key="setting">
				<div>
					<fieldset>
						<Flex>
							<FlexItem>
								<TextControl
									label="Altura"
									placeholder='px'
									value={ attributes.custom_size_height }
									onChange={ ( value ) => onChangeCustomHeight( value ) }
								/>
							</FlexItem>
							<FlexItem>
								<TextControl
									label="Largura"
									placeholder='px'
									value={ attributes.custom_size_width }
									onChange={ ( value ) => onChangeCustomWidth( value ) }
								/>
							</FlexItem>								
						</Flex>
					</fieldset>
				</div>
			</InspectorControls>
			<TextControl
				style={ {
					width: attributes.custom_size_width + 'px',
					height: attributes.custom_size_height + 'px',
					marginInline: 'auto'
				} }
				value={attributes.message}
			/>	
		</div>
	);
}