/**
 * WordPress dependencies
 */
export * from '@wordpress/components';

import {
	BaseControl as OriginalBaseControl,
	CheckboxControl as OriginalCheckboxControl,
	FormTokenField as OriginalFormTokenField,
	RangeControl as OriginalRangeControl,
	SelectControl as OriginalSelectControl,
	TextControl as OriginalTextControl,
	TextareaControl as OriginalTextareaControl,
	ToggleControl as OriginalToggleControl,
} from '@wordpress/components';

// @ts-expect-error Compiler complains, but this is just a temporary fix.
const WrappedBaseControl: typeof OriginalBaseControl = ( props ) => (
	<OriginalBaseControl
		{ ...{
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);
export const BaseControl = Object.assign(
	WrappedBaseControl,
	OriginalBaseControl
);

const WrappedCheckboxControl: typeof OriginalCheckboxControl = ( props ) => (
	<OriginalCheckboxControl
		{ ...{
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);
export const CheckboxControl = Object.assign(
	WrappedCheckboxControl,
	OriginalCheckboxControl
);

const WrappedFormTokenField: typeof OriginalFormTokenField = ( props ) => (
	<OriginalFormTokenField
		{ ...{
			__next40pxDefaultSize: true,
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);
export const FormTokenField = Object.assign(
	WrappedFormTokenField,
	OriginalFormTokenField
);

// @ts-expect-error Compiler complains, but this is just a temporary fix.
const WrappedRangeControl: typeof OriginalRangeControl = ( props ) => (
	<OriginalRangeControl
		{ ...{
			__next40pxDefaultSize: true,
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);
export const RangeControl = Object.assign(
	WrappedRangeControl,
	OriginalRangeControl
);

export const SelectControl: typeof OriginalSelectControl = ( props ) => (
	<OriginalSelectControl
		{ ...{
			__next40pxDefaultSize: true,
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);

// @ts-expect-error Compiler complains, but this is just a temporary fix.
const WrappedTextControl: typeof OriginalTextControl = ( props ) => (
	<OriginalTextControl
		{ ...{
			__next40pxDefaultSize: true,
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);
export const TextControl = Object.assign(
	WrappedTextControl,
	OriginalTextControl
);

// @ts-expect-error Compiler complains, but this is just a temporary fix.
const WrappedTextareaControl: typeof OriginalTextareaControl = ( props ) => (
	<OriginalTextareaControl
		{ ...{
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);
export const TextareaControl = Object.assign(
	WrappedTextareaControl,
	OriginalTextareaControl
);

// @ts-expect-error Compiler complains, but this is just a temporary fix.
const WrappedToggleControl: typeof OriginalToggleControl = ( props ) => (
	<OriginalToggleControl
		{ ...{
			__nextHasNoMarginBottom: true,
			...props,
		} }
	/>
);
export const ToggleControl = Object.assign(
	WrappedToggleControl,
	OriginalToggleControl
);