import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import {
	PanelBody,
	TextControl,
	TextareaControl,
} from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';

export default function Edit( { attributes, setAttributes } ) {
	const {
		title,
		format,
		loading_text,
		checkout_text,
		cart_text,
		no_bookings_text,
	} = attributes;

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Cart settings', 'em-pro' ) }>
					<TextControl
						label={ __( 'Title', 'em-pro' ) }
						value={ title }
						onChange={ ( v ) => setAttributes( { title: v } ) }
					/>
					<TextControl
						label={ __( 'Loading text', 'em-pro' ) }
						value={ loading_text }
						onChange={ ( v ) =>
							setAttributes( { loading_text: v } )
						}
					/>
					<TextControl
						label={ __( 'Checkout button text', 'em-pro' ) }
						value={ checkout_text }
						onChange={ ( v ) =>
							setAttributes( { checkout_text: v } )
						}
					/>
					<TextControl
						label={ __( 'View cart text', 'em-pro' ) }
						value={ cart_text }
						onChange={ ( v ) =>
							setAttributes( { cart_text: v } )
						}
					/>
					<TextControl
						label={ __( 'No bookings text', 'em-pro' ) }
						value={ no_bookings_text }
						onChange={ ( v ) =>
							setAttributes( { no_bookings_text: v } )
						}
					/>
				</PanelBody>
				<PanelBody
					title={ __( 'Output format (advanced)', 'em-pro' ) }
					initialOpen={ false }
				>
					<TextareaControl
						label={ __( 'Booking item format', 'em-pro' ) }
						value={ format }
						onChange={ ( v ) => setAttributes( { format: v } ) }
					/>
				</PanelBody>
			</InspectorControls>
			<div { ...useBlockProps() }>
				<ServerSideRender
					block="events-manager/multiple-bookings-cart"
					attributes={ attributes }
				/>
			</div>
		</>
	);
}
