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

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Result Button', 'wlc-search-integration-with-algolia' ) } initialOpen={ true }>
					<TextControl
						label={ __( 'Label', 'wlc-search-integration-with-algolia' ) }
						value={ label || '' }
						onChange={ ( v ) => setAttributes( { label: v } ) }
					/>
					<SelectControl
						label={ __( 'Link', 'wlc-search-integration-with-algolia' ) }
						value={ linkType || 'permalink' }
						options={ [
							{ 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>
				<span style={ { display: 'inline-block', padding: '6px 10px', borderRadius: 10, border: '1px solid rgba(0,0,0,0.2)' } }>
					{ label || __( 'Button', 'wlc-search-integration-with-algolia' ) }
				</span>
			</div>
		</>
	);
}




