export const DEFAULT_TRANSFORM_VALUES = {
	translateX: '',
	translateY: '',
	translateZ: '',
	scaleX: '',
	scaleY: '',
	rotate: '',
	rotateX: '',
	rotateY: '',
	rotateZ: '',
	skewX: '',
	skewY: '',
};

const sanitizeTransformValue = ( value ) => {
	if ( value === undefined || value === null ) {
		return '';
	}

	return String( value ).trim();
};

export const buildTransformStyle = ( transform ) => {
	if ( ! transform || typeof transform !== 'object' ) {
		return null;
	}

	const translateX = sanitizeTransformValue( transform.translateX );
	const translateY = sanitizeTransformValue( transform.translateY );
	const translateZ = sanitizeTransformValue( transform.translateZ );
	const scaleX = sanitizeTransformValue( transform.scaleX );
	const scaleY = sanitizeTransformValue( transform.scaleY );
	const rotateX = sanitizeTransformValue( transform.rotateX );
	const rotateY = sanitizeTransformValue( transform.rotateY );
	const rotateZ = sanitizeTransformValue( transform.rotateZ || transform.rotate );
	const skewX = sanitizeTransformValue( transform.skewX );
	const skewY = sanitizeTransformValue( transform.skewY );

	const transforms = [];

	if ( translateZ ) {
		transforms.push(
			`translate3d(${ translateX || '0px' }, ${ translateY || '0px' }, ${ translateZ })`
		);
	} else {
		if ( translateX ) {
			transforms.push( `translateX(${ translateX })` );
		}

		if ( translateY ) {
			transforms.push( `translateY(${ translateY })` );
		}
	}

	if ( scaleX ) {
		transforms.push( `scaleX(${ scaleX })` );
	}

	if ( scaleY ) {
		transforms.push( `scaleY(${ scaleY })` );
	}

	if ( rotateX ) {
		transforms.push( `rotateX(${ rotateX })` );
	}

	if ( rotateY ) {
		transforms.push( `rotateY(${ rotateY })` );
	}

	if ( rotateZ ) {
		transforms.push( `rotateZ(${ rotateZ })` );
	}

	if ( skewX ) {
		transforms.push( `skewX(${ skewX })` );
	}

	if ( skewY ) {
		transforms.push( `skewY(${ skewY })` );
	}

	return transforms.length > 0 ? transforms.join( ' ' ) : null;
};
