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 { label, fieldPath, linkType, linkFieldPath, hideIfEmpty } = attributes;

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Result Field', 'wlc-search-integration-with-algolia' ) } initialOpen={ true }>
					<TextControl
						label={ __( 'Label (optional)', 'wlc-search-integration-with-algolia' ) }
						value={ label || '' }
						onChange={ ( v ) => setAttributes( { label: v } ) }
					/>
					<TextControl
						label={ __( 'Field path', 'wlc-search-integration-with-algolia' ) }
						help={ __( 'Dot path into Algolia record, e.g. _price, taxonomies.product_cat.name', 'wlc-search-integration-with-algolia' ) }
						value={ fieldPath || '' }
						onChange={ ( v ) => setAttributes( { fieldPath: v } ) }
					/>
					<SelectControl
						label={ __( 'Link', 'wlc-search-integration-with-algolia' ) }
						value={ linkType || 'none' }
						options={ [
							{ label: __( 'None', 'wlc-search-integration-with-algolia' ), value: 'none' },
							{ label: __( 'Permalink', 'wlc-search-integration-with-algolia' ), value: 'permalink' },
							{ label: __( 'Add to cart', 'wlc-search-integration-with-algolia' ), value: 'add_to_cart' },
							{ 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={ { fontSize: 13 } }>
				<strong>{ label || __( 'Field', 'wlc-search-integration-with-algolia' ) }</strong>{ ' ' }
				<span style={ { opacity: 0.65 } }>{ fieldPath ? `(${ fieldPath })` : __( '(set fieldPath)', 'wlc-search-integration-with-algolia' ) }</span>
			</div>
		</>
	);
}




