import SpacingControls from './Spacing';
import LayoutControls from './Layout';
import SizingControl from './Sizing';
import TypographyControl from './Typography';
import BackgroundControl from './Background';
import BorderControl from './Border';
import PositionControl from './Position';
import EffectControl from './Effect';

/**
 * Style controls for a block's inner content/text element.
 *
 * Remap-wrapper: the shared controls read/write the standard keys (padding,
 * textColor, …); here we namespace them all under a single `contentStyles` object
 * attribute so the content element gets its own full style set, independent of the
 * Main element. Generation targets the element via the generator's
 * `elementSuffix` / `element_suffix` option.
 *
 * Used by blocks that wrap their text in a `__content` element (bodycopy, heading).
 */
export default function ContentStyleControls( { attributes, setAttributes } ) {
	const contentStyles = attributes.contentStyles || {};
	const setContent = ( patch ) =>
		setAttributes( { contentStyles: { ...contentStyles, ...patch } } );

	// The shared controls render their inner fields only when activeStyleTab === 'main'
	// (and hover fields on 'mainHover'). We want the base fields, so we pass 'main';
	// they then read/write the standard keys, which the wrapper namespaces under
	// `contentStyles`. Same control set and order as the Main tab.
	const shared = {
		attributes: contentStyles,
		setAttributes: setContent,
		activeStyleTab: 'main',
	};

	return (
		<>
			<LayoutControls    { ...shared } />
			<SpacingControls   { ...shared } />
			<SizingControl     { ...shared } />
			<TypographyControl { ...shared } />
			<BackgroundControl { ...shared } />
			<BorderControl     { ...shared } />
			<PositionControl   { ...shared } />
			<EffectControl     { ...shared } />
		</>
	);
}
