/**
 * External dependencies
 */
import { startCase, forEach } from 'lodash'

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

export default ( {
	attributes,
	setAttributes,
} ) => {
	const blockProps = useBlockProps()
	const controllers = []

	if ( ! attributes.post_id ) {
		attributes.post_id = rankMath.objectID
		setAttributes( { post_id: rankMath.objectID } )
	}
	forEach( attributes, ( attribute, slug ) => {
		if ( 'post_id' === slug ) {
			controllers.push(
				<TextControl
					key={ slug }
					label={ __( startCase( slug ), 'seo-by-rank-math' ) }
					value={ attributes[ slug ] }
					type="number"
					min={ 1 }
					step={ 1 }
					onChange={ ( newID ) => {
						const attrs = {}
						attrs[ slug ] = newID ? newID : rankMath.objectID
						setAttributes( attrs )
					} }
					__next40pxDefaultSize={ true }
					__nextHasNoMarginBottom={ true }
				/>
			)
			return
		}

		if ( 'className' !== slug ) {
			controllers.push(
				<TextControl
					key={ slug }
					label={ __( startCase( slug ), 'seo-by-rank-math' ) }
					value={ attributes[ slug ] }
					type="string"
					onChange={ ( nextID ) => {
						const attrs = {}
						attrs[ slug ] = nextID
						setAttributes( attrs )
					} }
					__next40pxDefaultSize={ true }
					__nextHasNoMarginBottom={ true }
				/>
			)
		}
	} )

	return (
		<div { ...blockProps }>
			<InspectorControls>
				<PanelBody title={ __( 'Settings', 'seo-by-rank-math' ) }>
					{ controllers }
				</PanelBody>
			</InspectorControls>

			<ServerSideRender
				block="rank-math/rich-snippet"
				attributes={ attributes }
			/>
		</div>
	)
}