import SpacingControls from '../Spacing';
import BackgroundControl from '../Background';
import BorderControl from '../Border';
import PositionControl from '../Position';
import EffectControl from '../Effect';
import {
	createEffectDefault,
	createInsetDefault,
	createResponsiveValueDefault,
	createSpacingDefault,
	createLayersDefault,
	createBorderDefault,
	createBorderRadiusDefault,
} from '../../settings/iconUtils';

export default function IconStyleControls( {
	attributes,
	setAttributes,
} ) {
	const mappedAttributes = {
		position:         attributes.iconPosition         || createResponsiveValueDefault(),
		inset:            attributes.iconInset            || createInsetDefault(),
		overflowX:        attributes.iconOverflowX        || createResponsiveValueDefault(),
		overflowY:        attributes.iconOverflowY        || createResponsiveValueDefault(),
		zIndex:           attributes.iconZIndex           || createResponsiveValueDefault(),
		effect:           attributes.iconEffect           || createEffectDefault(),
		padding:          attributes.iconPadding          || createSpacingDefault(),
		margin:           attributes.iconMargin           || createSpacingDefault(),
		backgroundColor:  attributes.iconBackgroundColor  || createResponsiveValueDefault(),
		backgroundLayers: attributes.iconBackgroundLayers || createLayersDefault(),
		border:           attributes.iconBorder           || createBorderDefault(),
		borderRadius:     attributes.iconBorderRadius     || createBorderRadiusDefault(),
	};

	const setIconStyleAttributes = ( nextAttributes ) => {
		const out = {};
		Object.entries( nextAttributes ).forEach( ( [ key, value ] ) => {
			switch ( key ) {
				case 'position':         out.iconPosition        = value; break;
				case 'inset':            out.iconInset           = value; break;
				case 'overflowX':        out.iconOverflowX       = value; break;
				case 'overflowY':        out.iconOverflowY       = value; break;
				case 'zIndex':           out.iconZIndex          = value; break;
				case 'effect':           out.iconEffect          = value; break;
				case 'padding':          out.iconPadding         = value; break;
				case 'margin':           out.iconMargin          = value; break;
				case 'backgroundColor':  out.iconBackgroundColor = value; break;
				case 'backgroundLayers': out.iconBackgroundLayers = value; break;
				case 'border':           out.iconBorder          = value; break;
				case 'borderRadius':     out.iconBorderRadius    = value; break;
				default:                 out[ key ]              = value;
			}
		} );
		setAttributes( out );
	};

	return (
		<>
			<SpacingControls
				attributes={ mappedAttributes }
				setAttributes={ setIconStyleAttributes }
				activeStyleTab="main"
			/>
			<BackgroundControl
				attributes={ mappedAttributes }
				setAttributes={ setIconStyleAttributes }
				activeStyleTab="main"
			/>
			<BorderControl
				attributes={ mappedAttributes }
				setAttributes={ setIconStyleAttributes }
				activeStyleTab="main"
			/>
			<PositionControl
				attributes={ mappedAttributes }
				setAttributes={ setIconStyleAttributes }
				activeStyleTab="main"
			/>
			<EffectControl
				attributes={ mappedAttributes }
				setAttributes={ setIconStyleAttributes }
				activeStyleTab="main"
			/>
		</>
	);
}
