import SizingControl from '../Sizing';
import PositionControl from '../Position';
import EffectControl from '../Effect';
import {
	createEffectDefault,
	createInsetDefault,
	createResponsiveValueDefault,
} from '../../settings/iconUtils';

export default function SvgStyleControls( {
	attributes,
	setAttributes,
} ) {
	const empty = createResponsiveValueDefault();

	const mappedAttributes = {
		width:       attributes.svgWidth       || { ...empty },
		height:      attributes.svgHeight      || { ...empty },
		minWidth:    attributes.svgMinWidth    || { ...empty },
		minHeight:   attributes.svgMinHeight   || { ...empty },
		maxWidth:    attributes.svgMaxWidth    || { ...empty },
		maxHeight:   attributes.svgMaxHeight   || { ...empty },
		aspectRatio: attributes.svgAspectRatio || { ...empty },
		effect:      attributes.svgEffect      || createEffectDefault(),
		position:    attributes.svgPosition    || { ...empty },
		inset:       attributes.svgInset       || createInsetDefault(),
		overflowX:   attributes.svgOverflowX   || { ...empty },
		overflowY:   attributes.svgOverflowY   || { ...empty },
		zIndex:      attributes.svgZIndex      || { ...empty },
	};

	const setSvgStyleAttributes = ( nextAttributes ) => {
		const out = {};
		Object.entries( nextAttributes ).forEach( ( [ key, value ] ) => {
			switch ( key ) {
				case 'width':        out.svgWidth       = value; break;
				case 'height':       out.svgHeight      = value; break;
				case 'minWidth':     out.svgMinWidth    = value; break;
				case 'minHeight':    out.svgMinHeight   = value; break;
				case 'maxWidth':     out.svgMaxWidth    = value; break;
				case 'maxHeight':    out.svgMaxHeight   = value; break;
				case 'aspectRatio':  out.svgAspectRatio = value; break;
				case 'effect':       out.svgEffect      = value; break;
				case 'position':     out.svgPosition    = value; break;
				case 'inset':        out.svgInset       = value; break;
				case 'overflowX':    out.svgOverflowX   = value; break;
				case 'overflowY':    out.svgOverflowY   = value; break;
				case 'zIndex':       out.svgZIndex      = value; break;
				default:             out[ key ]         = value;
			}
		} );
		setAttributes( out );
	};

	return (
		<>
			<SizingControl
				attributes={ mappedAttributes }
				setAttributes={ setSvgStyleAttributes }
				activeStyleTab="main"
			/>
			<EffectControl
				attributes={ mappedAttributes }
				setAttributes={ setSvgStyleAttributes }
				activeStyleTab="main"
			/>
			<PositionControl
				attributes={ mappedAttributes }
				setAttributes={ setSvgStyleAttributes }
				activeStyleTab="main"
			/>
		</>
	);
}
