/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
 */


 const {
	useBlockProps,
	InspectorControls,
} = wp.blockEditor

import {
} from '@wordpress/block-editor';
const {
	Panel,
    PanelBody,
    PanelRow,
    SelectControl,
	ToggleControl,
} = wp.components

const {
	useState,
	useEffect,
} = wp.element
// import { ComboboxControl } from '@wordpress/components';
// import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
 * @return {WPElement} Element to render.
 */
export default function Edit( { attributes, setAttributes } ) {

	const {
	} = attributes
	
	const classNamePrefix = `wd-block-webdevia-product-atteribute`

	const blockProps = useBlockProps( {
		className: `${classNamePrefix}`
	} )
	

	const [attributeOptions, setAttributeOptions] = useState([]);
	
		useEffect(() => {
			fetch(`${devia.home_url}/wp-json/wdmp/v1/attribute-options`)
				.then(response => response.json())
				.then(data => setAttributeOptions(data))
				.catch(error => console.error('Error fetching attribute options:', error));
		}, []);
		
	return [
		
		<InspectorControls>
                <Panel>
                    <PanelBody title={__("Settings", "lifttruck")} initialOpen={true}>
                        <PanelRow>
							
						<ToggleControl
								label={ __('Show Label', 'lifttruck') }
								help={ attributes.showlabel ?
									__('Show Label', 'lifttruck') :
									__('Hide Label', 'lifttruck')
								}
								checked={ attributes.showlabel }
								onChange={ showlabel => setAttributes({showlabel}) }
							/>
							</PanelRow>
							<PanelRow>
								<SelectControl
                                label={__("Product Attributes", "lifttruck")}
                                value={attributes.productattributes}
                                options={attributeOptions.map(option => ({ value: option, label: option }))}
                                onChange={(productattributes) => setAttributes({ productattributes })}
                            />
							
                            
                        </PanelRow>
                    </PanelBody>
                </Panel>
            </InspectorControls>,
		<div { ...blockProps } >
			
			<p>{ __('Attribute: ','lifttruck') + attributes.productattributes }</p>

		</div>
	]
}