import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, SelectControl, ToggleControl } from '@wordpress/components';

export default function Edit( { attributes, setAttributes } ) {
	const { fieldPath, linkType, linkFieldPath, hideIfEmpty } = attributes;

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Result Image', 'wlc-search-integration-with-algolia' ) } initialOpen={ true }>
					<TextControl
						label={ __( 'Image URL field path', 'wlc-search-integration-with-algolia' ) }
						value={ fieldPath || '' }
						onChange={ ( v ) => setAttributes( { fieldPath: v } ) }
					/>
					<SelectControl
						label={ __( 'Link', 'wlc-search-integration-with-algolia' ) }
						value={ linkType || 'permalink' }
						options={ [
							{ label: __( 'Permalink', 'wlc-search-integration-with-algolia' ), value: 'permalink' },
							{ label: __( 'None', 'wlc-search-integration-with-algolia' ), value: 'none' },
							{ label: __( 'Custom URL (field)', 'wlc-search-integration-with-algolia' ), value: 'field' },
						] }
						onChange={ ( v ) => setAttributes( { linkType: v } ) }
					/>
					{ linkType === 'field' ? (
						<TextControl
							label={ __( 'Link field path', 'wlc-search-integration-with-algolia' ) }
							value={ linkFieldPath || '' }
							onChange={ ( v ) => setAttributes( { linkFieldPath: v } ) }
						/>
					) : null }
					<ToggleControl
						label={ __( 'Hide if empty', 'wlc-search-integration-with-algolia' ) }
						checked={ hideIfEmpty !== false }
						onChange={ ( v ) => setAttributes( { hideIfEmpty: !! v } ) }
					/>
				</PanelBody>
			</InspectorControls>

			<div style={ { width: 110, height: 70, background: '#eee', borderRadius: 10, display: 'grid', placeItems: 'center', color: '#555' } }>
				{ __( 'Image', 'wlc-search-integration-with-algolia' ) }
			</div>
		</>
	);
}


