export const createSpacingDefault = () => ( {
	desktop: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
	tablet:  { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
	mobile:  { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
} );

export const createLayersDefault = () => ( {
	desktop: [],
	tablet: [],
	mobile: [],
} );

export const createBorderDefault = () => ( {
	desktop: { width: '', style: '', color: '', sides: {}, isLinkActive: true },
	tablet:  { width: '', style: '', color: '', sides: {}, isLinkActive: true },
	mobile:  { width: '', style: '', color: '', sides: {}, isLinkActive: true },
} );

export const createBorderRadiusDefault = () => ( {
	desktop: { value: '', corners: {}, isLinkActive: true },
	tablet:  { value: '', corners: {}, isLinkActive: true },
	mobile:  { value: '', corners: {}, isLinkActive: true },
} );

export const createResponsiveValueDefault = ( value = '' ) => ( {
	desktop: value,
	tablet: value,
	mobile: value,
} );

export const createInsetDefault = () => ( {
	desktop: { top: '', right: '', bottom: '', left: '' },
	tablet: { top: '', right: '', bottom: '', left: '' },
	mobile: { top: '', right: '', bottom: '', left: '' },
} );

export const createEffectDeviceDefault = () => ( {
	boxShadow: {
		xOffset: '',
		yOffset: '',
		blurRadius: '',
		spreadRadius: '',
		color: '',
		inset: false,
	},
	transition: {
		property: '',
		duration: '',
		timingFunction: '',
		delay: '',
	},
	filter: {
		blur: '',
		brightness: '',
		contrast: '',
		grayscale: '',
		hueRotate: '',
		invert: '',
		opacity: '',
		saturate: '',
		sepia: '',
	},
	textShadow: {
		xOffset: '',
		yOffset: '',
		blurRadius: '',
		color: '',
	},
	transform: {
		translateX: '',
		translateY: '',
		translateZ: '',
		scaleX: '',
		scaleY: '',
		rotate: '',
		rotateX: '',
		rotateY: '',
		rotateZ: '',
		skewX: '',
		skewY: '',
	},
	opacity: '',
	visibility: '',
} );

export const createEffectDefault = () => ( {
	desktop: createEffectDeviceDefault(),
	tablet: createEffectDeviceDefault(),
	mobile: createEffectDeviceDefault(),
} );

export const sanitizeSvg = ( svg ) => {
	if ( ! svg || typeof svg !== 'string' || ! svg.includes( '<svg' ) ) {
		return '';
	}

	try {
		const dangerousStylePattern = /(?:expression\s*\(|javascript\s*:|@import|behavior\s*:|url\s*\(\s*["']?\s*javascript\s*:)/i;
		const parser = new window.DOMParser();
		const doc = parser.parseFromString( svg, 'image/svg+xml' );
		const root = doc.documentElement;

		if (
			! root ||
			root.nodeName.toLowerCase() !== 'svg' ||
			doc.getElementsByTagName( 'parsererror' ).length
		) {
			return '';
		}

		const allowedTags = new Set( [
			'svg',
			'path',
			'g',
			'title',
			'desc',
			'rect',
			'circle',
			'ellipse',
			'line',
			'polyline',
			'polygon',
			'defs',
			'clippath',
			'mask',
			'pattern',
			'symbol',
			'use',
			'image',
			'lineargradient',
			'radialgradient',
			'stop',
			'style',
		] );

		const allowedAttrs = new Set( [
			'xmlns',
			'xmlns:xlink',
			'width',
			'height',
			'viewBox',
			'viewbox',
			'fill',
			'fill-opacity',
			'fill-rule',
			'clip-rule',
			'stroke',
			'stroke-width',
			'stroke-linecap',
			'stroke-linejoin',
			'stroke-dasharray',
			'stroke-dashoffset',
			'stroke-miterlimit',
			'stroke-opacity',
			'class',
			'style',
			'aria-hidden',
			'role',
			'focusable',
			'preserveAspectRatio',
			'preserveaspectratio',
			'd',
			'transform',
			'x',
			'y',
			'rx',
			'ry',
			'cx',
			'cy',
			'r',
			'x1',
			'y1',
			'x2',
			'y2',
			'points',
			'href',
			'xlink:href',
			'id',
			'opacity',
			'offset',
			'stop-color',
			'stop-opacity',
			'gradientUnits',
			'gradientunits',
			'gradientTransform',
			'gradienttransform',
			'spreadMethod',
			'spreadmethod',
			'patternUnits',
			'patternunits',
			'patternContentUnits',
			'patterncontentunits',
			'patternTransform',
			'patterntransform',
			'maskUnits',
			'maskunits',
			'maskContentUnits',
			'maskcontentunits',
			'clipPathUnits',
			'clippathunits',
			'fx',
			'fy',
			'xml:space',
			'type',
			'data-name',
		] );

		const walk = ( node ) => {
			if ( node.nodeType === window.Node.TEXT_NODE ) {
				if (
					node.parentNode?.nodeName?.toLowerCase() === 'style' &&
					dangerousStylePattern.test( node.nodeValue || '' )
				) {
					node.nodeValue = '';
				}
				return;
			}

			if ( node.nodeType !== window.Node.ELEMENT_NODE ) {
				return;
			}

			const tagName = node.nodeName.toLowerCase();

			if ( ! allowedTags.has( tagName ) ) {
				node.remove();
				return;
			}

			if (
				tagName === 'style' &&
				dangerousStylePattern.test( node.textContent || '' )
			) {
				node.remove();
				return;
			}

			Array.from( node.attributes || [] ).forEach( ( attr ) => {
				const attrName = attr.name;
				const lowerName = attrName.toLowerCase();

				if ( lowerName.startsWith( 'on' ) ) {
					node.removeAttribute( attrName );
					return;
				}

				if (
					! allowedAttrs.has( attrName ) &&
					! allowedAttrs.has( lowerName )
				) {
					node.removeAttribute( attrName );
					return;
				}

				if (
					( lowerName === 'href' || lowerName === 'xlink:href' ) &&
					attr.value &&
					attr.value.trim().toLowerCase().startsWith( 'javascript:' )
				) {
					node.removeAttribute( attrName );
					return;
				}

				if (
					lowerName === 'style' &&
					attr.value &&
					dangerousStylePattern.test( attr.value )
				) {
					node.removeAttribute( attrName );
				}
			} );

			Array.from( node.childNodes || [] ).forEach( walk );
		};

		walk( root );

		return root.outerHTML || '';
	} catch ( error ) {
		return '';
	}
};
