/**
 * WordPress dependencies
 */
import { SelectControl } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import clsx from 'clsx';
import type { PostTypeName, WebhookSettings } from '@nelio-content/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { TextFieldControl } from '../text-field-control';
import { HeadersFieldControl } from './headers-field-control';
import { FormDataKeyValuesFieldControl } from './form-data-key-values-field-control';

export type WebhookSettingsControlProps = {
	readonly className?: string;
	readonly isDisabled?: boolean;
	readonly hidePlaceholders?: boolean;
	readonly type?: PostTypeName;
	readonly settings: WebhookSettings;
	readonly onChange: ( settings: WebhookSettings ) => void;
};

export const WebhookSettingsControl = ( {
	className,
	isDisabled,
	hidePlaceholders,
	type,
	settings,
	onChange,
}: WebhookSettingsControlProps ): JSX.Element | null => {
	return (
		<div
			className={ clsx(
				'nelio-content-webhook-settings-control',
				className
			) }
		>
			<TextFieldControl
				className="nelio-content-webhook-settings-control__url-field"
				value={ settings.url }
				hidePlaceholders={ hidePlaceholders }
				type={ type }
				label={ _x( 'Request URL', 'text', 'nelio-content' ) }
				onChange={ ( value ) =>
					onChange( {
						...settings,
						url: value,
					} )
				}
			/>
			<SelectControl
				className="nelio-content-webhook-settings-control__selector"
				label={ _x( 'Request Method', 'text', 'nelio-content' ) }
				value={ settings.method }
				disabled={ isDisabled }
				options={ [
					{ label: 'GET', value: 'GET' },
					{ label: 'POST', value: 'POST' },
					{ label: 'PUT', value: 'PUT' },
					{ label: 'DELETE', value: 'DELETE' },
					{ label: 'PATCH', value: 'PATCH' },
					{ label: 'HEAD', value: 'HEAD' },
				] }
				onChange={ ( value ) =>
					onChange( {
						...settings,
						method: value as WebhookSettings[ 'method' ],
					} )
				}
			/>
			<HeadersFieldControl
				items={ settings.headers }
				hidePlaceholders={ hidePlaceholders }
				type={ type }
				label={ _x( 'Request Headers', 'text', 'nelio-content' ) }
				onChange={ ( value ) =>
					onChange( { ...settings, headers: value } )
				}
			/>
			{ ! [ 'GET', 'HEAD' ].includes( settings.method ) && (
				<SelectControl
					className="nelio-content-webhook-settings-control__selector"
					label={ _x( 'Request Body Type', 'text', 'nelio-content' ) }
					value={ settings.bodyType }
					options={ [
						{
							label: _x( 'None', 'text', 'nelio-popups-premium' ),
							value: 'none',
						},
						{ label: 'JSON', value: 'json' },
						{ label: 'Form Data', value: 'form' },
					] }
					onChange={ ( value ) => {
						const newAttrs = {
							...settings,
							bodyType: value as WebhookSettings[ 'bodyType' ],
							...( value === 'json' ? { bodyContent: '' } : {} ),
							...( value === 'form' ? { bodyContent: [] } : {} ),
						} as WebhookSettings;
						onChange( newAttrs );
					} }
				/>
			) }
			{ settings.bodyType === 'json' && (
				<TextFieldControl
					isMultiline={ true }
					hidePlaceholders={ hidePlaceholders }
					type={ type }
					value={ settings.bodyContent }
					label={ _x( 'Request Body JSON', 'text', 'nelio-content' ) }
					onChange={ ( value ) =>
						onChange( {
							...settings,
							bodyContent: value,
						} )
					}
				/>
			) }
			{ settings.bodyType === 'form' && (
				<FormDataKeyValuesFieldControl
					items={ settings.bodyContent }
					hidePlaceholders={ hidePlaceholders }
					type={ type }
					label={ _x(
						'Request Body Form Data',
						'text',
						'nelio-content'
					) }
					onChange={ ( value ) =>
						onChange( {
							...settings,
							bodyContent: value,
						} )
					}
				/>
			) }
		</div>
	);
};