/*
 * Generate styles for block
 */

import { hexToRgba } from './general-utils';

export const generateBlockStyles = ( attributes ) => {
	const {
		// Layout Panel
		horizontalAlignDesktop, horizontalAlignTablet, horizontalAlignMobile,
		verticalAlignDesktop, verticalAlignTablet, verticalAlignMobile,

		columnGapDesktop, columnGapTablet, columnGapMobile,
		rowGapDesktop, rowGapTablet, rowGapMobile,

		// Block Spacing Panel
		minHeightDesktop, minHeightTablet, minHeightMobile,
		maxWidthDesktop, maxWidthTablet, maxWidthMobile,

		contentVerticalAlignDesktop, contentVerticalAlignTablet, contentVerticalAlignMobile,
		contentHorizontalAlignDesktop, contentHorizontalAlignTablet, contentHorizontalAlignMobile,

		paddingTopDesktop, paddingTopTablet, paddingTopMobile,
		paddingRightDesktop, paddingRightTablet, paddingRightMobile,
		paddingBottomDesktop, paddingBottomTablet, paddingBottomMobile,
		paddingLeftDesktop, paddingLeftTablet, paddingLeftMobile,

		marginTopDesktop, marginTopTablet, marginTopMobile,
		marginRightDesktop, marginRightTablet, marginRightMobile,
		marginBottomDesktop, marginBottomTablet, marginBottomMobile,
		marginLeftDesktop, marginLeftTablet, marginLeftMobile,

		// Background Panel
		backgroundMode, backgroundColor, backgroundOpacity, backgroundGradient,
		hoverBackgroundColor, hoverBackgroundOpacity,

		backgroundImageDesktop, backgroundImageTablet, backgroundImageMobile,
		backgroundImageURLDesktop, backgroundImageURLTablet, backgroundImageURLMobile,

		backgroundFixed, backgroundPosition, backgroundSize,
		backgroundCustomSizeDesktop, backgroundCustomSizeTablet, backgroundCustomSizeMobile,
		backgroundRepeat, backgroundTint, backgroundBlendMode,

		// Border Panel
		borderTopWidthDesktop, borderTopWidthTablet, borderTopWidthMobile,
		borderRightWidthDesktop, borderRightWidthTablet, borderRightWidthMobile,
		borderBottomWidthDesktop, borderBottomWidthTablet, borderBottomWidthMobile,
		borderLeftWidthDesktop, borderLeftWidthTablet, borderLeftWidthMobile,

		borderColor, borderOpacity,

		hoverBorderTopWidthDesktop, hoverBorderTopWidthTablet, hoverBorderTopWidthMobile,
		hoverBorderRightWidthDesktop, hoverBorderRightWidthTablet, hoverBorderRightWidthMobile,
		hoverBorderBottomWidthDesktop, hoverBorderBottomWidthTablet, hoverBorderBottomWidthMobile,
		hoverBorderLeftWidthDesktop, hoverBorderLeftWidthTablet, hoverBorderLeftWidthMobile,

		hoverBorderColor, hoverBorderOpacity,

		// Box Shadow Panel
		boxShadowHOffset, boxShadowVOffset, boxShadowBlur, boxShadowSpread, boxShadowColor, boxShadowOpacity,
		hoverBoxShadowHOffset, hoverBoxShadowVOffset, hoverBoxShadowBlur, hoverBoxShadowSpread, hoverBoxShadowColor, hoverBoxShadowOpacity,

		// Radius Panel
		topLeftRadiusDesktop, topLeftRadiusTablet, topLeftRadiusMobile,
		topRightRadiusDesktop, topRightRadiusTablet, topRightRadiusMobile,
		bottomLeftRadiusDesktop, bottomLeftRadiusTablet, bottomLeftRadiusMobile,
		bottomRightRadiusDesktop, bottomRightRadiusTablet, bottomRightRadiusMobile,
	} = attributes;

	const isValidHexColor = ( color ) => {
		return /^#[0-9A-F]{6}$/i.test( color );
	};

	// Parse Background Colors and Opacity
	const parsedBackgroundColor = ( backgroundColor && isValidHexColor( backgroundColor ) )
		? hexToRgba( backgroundColor, backgroundOpacity || 1 )
		: 'transparent';

	const parsedHoverBackgroundColor = isValidHexColor( hoverBackgroundColor )
		? hexToRgba( hoverBackgroundColor, hoverBackgroundOpacity )
		: parsedBackgroundColor;

	// Calculate the Custom Background Size based on device type
	const calculatedBackgroundSizeDesktop = backgroundSize === 'custom' && backgroundCustomSizeDesktop !== null
		? `${backgroundCustomSizeDesktop}%`
		: backgroundSize || '';

	const calculatedBackgroundSizeTablet = backgroundSize === 'custom' && backgroundCustomSizeTablet !== null
		? `${backgroundCustomSizeTablet}%`
		: calculatedBackgroundSizeDesktop;

	const calculatedBackgroundSizeMobile = backgroundSize === 'custom' && backgroundCustomSizeMobile !== null
		? `${backgroundCustomSizeMobile}%`
		: calculatedBackgroundSizeTablet;

	// Only apply overlay (pseudo-element) when background image exists
	const overlayStyles = {
		'--ssmb-overlay-background-color': parsedBackgroundColor,
		'--ssmb-overlay-background-color-hover': parsedHoverBackgroundColor,
		'--ssmb-background-gradient ': backgroundMode === 'gradient' ? backgroundGradient : '',
		'--ssmb-background-blend-mode': backgroundBlendMode || 'normal',
	};

	// Parse Border Colors and Opacity
	const parsedBorderColor = ( borderColor && isValidHexColor( borderColor ) )
		? hexToRgba( borderColor, borderOpacity || 1 )
		: 'transparent';

	const parsedHoverBorderColor = ( hoverBorderColor && isValidHexColor( hoverBorderColor ) )
		? hexToRgba( hoverBorderColor, hoverBorderOpacity || 1 )
		: parsedBorderColor;

	// Parse Box Shadow
	const parsedBoxShadowColor = ( boxShadowColor && isValidHexColor( boxShadowColor ) )
		? hexToRgba( boxShadowColor, boxShadowOpacity || 1 )
		: 'transparent';

	const parsedHoverBoxShadowColor = ( hoverBoxShadowColor && isValidHexColor( hoverBoxShadowColor ) )
		? hexToRgba( hoverBoxShadowColor, hoverBoxShadowOpacity || 1 )
		: parsedBoxShadowColor;

	const blockWrapperStyles = {
		// Horizontal Alignment
		'--ssmb-content-horizontal-align': contentHorizontalAlignDesktop || 'flex-start',
		'--ssmb-content-horizontal-align-tablet': contentHorizontalAlignTablet || contentHorizontalAlignDesktop || 'flex-start',
		'--ssmb-content-horizontal-align-mobile': contentHorizontalAlignMobile || contentHorizontalAlignTablet || contentHorizontalAlignDesktop || 'flex-start',

		// Margin
		'--ssmb-margin-top-size': `${marginTopDesktop}px`,
		'--ssmb-margin-right-size': `${marginRightDesktop}px`,
		'--ssmb-margin-bottom-size': `${marginBottomDesktop}px`,
		'--ssmb-margin-left-size': `${marginLeftDesktop}px`,

		'--ssmb-margin-top-size-tablet': `${marginTopTablet || marginTopDesktop}px`,
		'--ssmb-margin-right-size-tablet': `${marginRightTablet || marginRightDesktop}px`,
		'--ssmb-margin-bottom-size-tablet': `${marginBottomTablet || marginBottomDesktop}px`,
		'--ssmb-margin-left-size-tablet': `${marginLeftTablet || marginLeftDesktop}px`,

		'--ssmb-margin-top-size-mobile': `${marginTopMobile || marginTopTablet || marginTopDesktop}px`,
		'--ssmb-margin-right-size-mobile': `${marginRightMobile || marginRightTablet || marginRightDesktop}px`,
		'--ssmb-margin-bottom-size-mobile': `${marginBottomMobile || marginBottomTablet || marginBottomDesktop}px`,
		'--ssmb-margin-left-size-mobile': `${marginLeftMobile || marginLeftTablet || marginLeftDesktop}px`,
	};

	// Wrapper styles (applies to the inner button wrapper)
	const buttonGroupWrapperStyles = {
		// Min Height
		'--ssmb-min-height-size': `${minHeightDesktop}px`,
		'--ssmb-min-height-size-tablet': `${minHeightTablet || minHeightDesktop}px`,
		'--ssmb-min-height-size-mobile': `${minHeightMobile || minHeightTablet || minHeightDesktop}px`,

		// Max Width
		'--ssmb-max-width-size': `${maxWidthDesktop}px`,
		'--ssmb-max-width-size-tablet': `${maxWidthTablet || maxWidthDesktop}px`,
		'--ssmb-max-width-size-mobile': `${maxWidthMobile || maxWidthTablet || maxWidthDesktop}px`,

		// Vertical Alignment
		'--ssmb-content-vertical-align': contentVerticalAlignDesktop || 'flex-start',
		'--ssmb-content-vertical-align-tablet': contentVerticalAlignTablet || contentVerticalAlignDesktop || 'flex-start',
		'--ssmb-content-vertical-align-mobile': contentVerticalAlignMobile || contentVerticalAlignTablet || contentVerticalAlignDesktop || 'flex-start',

		// Padding
		'--ssmb-padding-top-size': `${paddingTopDesktop}px`,
		'--ssmb-padding-right-size': `${paddingRightDesktop}px`,
		'--ssmb-padding-bottom-size': `${paddingBottomDesktop}px`,
		'--ssmb-padding-left-size': `${paddingLeftDesktop}px`,

		'--ssmb-padding-top-size-tablet': `${paddingTopTablet || paddingTopDesktop}px`,
		'--ssmb-padding-right-size-tablet': `${paddingRightTablet || paddingRightDesktop}px`,
		'--ssmb-padding-bottom-size-tablet': `${paddingBottomTablet || paddingBottomDesktop}px`,
		'--ssmb-padding-left-size-tablet': `${paddingLeftTablet || paddingLeftDesktop}px`,

		'--ssmb-padding-top-size-mobile': `${paddingTopMobile || paddingTopTablet || paddingTopDesktop}px`,
		'--ssmb-padding-right-size-mobile': `${paddingRightMobile || paddingRightTablet || paddingRightDesktop}px`,
		'--ssmb-padding-bottom-size-mobile': `${paddingBottomMobile || paddingBottomTablet || paddingBottomDesktop}px`,
		'--ssmb-padding-left-size-mobile': `${paddingLeftMobile || paddingLeftTablet || paddingLeftDesktop}px`,

		// Bcakground
		'--ssmb-background-color':
            ( !backgroundImageDesktop && !backgroundImageTablet && !backgroundImageMobile
            && !backgroundImageURLDesktop && !backgroundImageURLTablet && !backgroundImageURLMobile
            && backgroundMode === 'solid' && backgroundColor && isValidHexColor( backgroundColor ) )
            	? hexToRgba( backgroundColor, backgroundOpacity ) // Apply solid color if mode is solid
            	: ( backgroundMode === 'gradient' && !backgroundGradient && backgroundColor && isValidHexColor( backgroundColor ) )
            		? hexToRgba( backgroundColor, backgroundOpacity ) // Retain solid color until gradient is set
            		: 'transparent', // Default fallback to transparent

		'--ssmb-background-color-hover': parsedHoverBackgroundColor || 'transparent',

		'--ssmb-background-gradient':
            ( backgroundGradient !== null && backgroundMode === 'gradient' && !backgroundImageDesktop && !backgroundImageTablet && !backgroundImageMobile
            && !backgroundImageURLDesktop && !backgroundImageURLTablet && !backgroundImageURLMobile )
            	? backgroundGradient // Apply gradient if defined
            	: ( backgroundMode === 'gradient' && !backgroundGradient )
            		? '' // Empty string when gradient mode is selected but no gradient is set
            		: '', // Default to an empty string

		// Background Size
		'--ssmb-background-size': calculatedBackgroundSizeDesktop || 'cover',
		'--ssmb-background-size-tablet': calculatedBackgroundSizeTablet || calculatedBackgroundSizeDesktop || 'cover',
		'--ssmb-background-size-mobile': calculatedBackgroundSizeMobile || calculatedBackgroundSizeTablet || calculatedBackgroundSizeDesktop || 'cover',

		'--ssmb-background-position': backgroundPosition || 'center center',
		'--ssmb-background-repeat': backgroundRepeat || 'no-repeat',
		'--ssmb-background-attachment': backgroundFixed ? 'fixed' : 'scroll',

		'--ssmb-background-tint': backgroundTint ? backgroundTint.toString() : '0',
		'--ssmb-background-blend-mode': backgroundBlendMode || '',

		// Background Image
		'--ssmb-background-image': backgroundImageURLDesktop
			? `url(${backgroundImageURLDesktop})`
			: ( backgroundImageDesktop ? `url(${backgroundImageDesktop})` : 'none' ),

		'--ssmb-background-image-tablet': backgroundImageURLTablet
			? `url(${backgroundImageURLTablet})`
			: ( backgroundImageTablet
				? `url(${backgroundImageTablet})`
				: ( backgroundImageURLDesktop || backgroundImageDesktop
					? `url(${backgroundImageURLDesktop || backgroundImageDesktop})`
					: ( backgroundMode === 'gradient' && backgroundGradient !== null ? backgroundGradient : 'none' ) ) ),

		'--ssmb-background-image-mobile': backgroundImageURLMobile
			? `url(${backgroundImageURLMobile})`
			: ( backgroundImageMobile
				? `url(${backgroundImageMobile})`
				: ( backgroundImageURLTablet || backgroundImageTablet || backgroundImageURLDesktop || backgroundImageDesktop
					? `url(${backgroundImageURLTablet || backgroundImageTablet || backgroundImageURLDesktop || backgroundImageDesktop})`
					: ( backgroundMode === 'gradient' && backgroundGradient !== null ? backgroundGradient : 'none' ) ) ),
		// Border
		'--ssmb-border-top-width': `${borderTopWidthDesktop}px`,
		'--ssmb-border-right-width': `${borderRightWidthDesktop}px`,
		'--ssmb-border-bottom-width': `${borderBottomWidthDesktop}px`,
		'--ssmb-border-left-width': `${borderLeftWidthDesktop}px`,

		'--ssmb-border-top-width-tablet': `${borderTopWidthTablet || borderTopWidthDesktop}px`,
		'--ssmb-border-right-width-tablet': `${borderRightWidthTablet || borderRightWidthDesktop}px`,
		'--ssmb-border-bottom-width-tablet': `${borderBottomWidthTablet || borderBottomWidthDesktop}px`,
		'--ssmb-border-left-width-tablet': `${borderLeftWidthTablet || borderLeftWidthDesktop}px`,

		'--ssmb-border-top-width-mobile': `${borderTopWidthMobile || borderTopWidthTablet || borderTopWidthDesktop}px`,
		'--ssmb-border-right-width-mobile': `${borderRightWidthMobile || borderRightWidthTablet || borderRightWidthDesktop}px`,
		'--ssmb-border-bottom-width-mobile': `${borderBottomWidthMobile || borderBottomWidthTablet || borderBottomWidthDesktop}px`,
		'--ssmb-border-left-width-mobile': `${borderLeftWidthMobile || borderLeftWidthTablet || borderLeftWidthDesktop}px`,

		// Border Hover
		'--ssmb-border-top-width-hover': `${hoverBorderTopWidthDesktop || borderTopWidthDesktop}px`,
		'--ssmb-border-right-width-hover': `${hoverBorderRightWidthDesktop || borderRightWidthDesktop}px`,
		'--ssmb-border-bottom-width-hover': `${hoverBorderBottomWidthDesktop || borderBottomWidthDesktop}px`,
		'--ssmb-border-left-width-hover': `${hoverBorderLeftWidthDesktop || borderLeftWidthDesktop}px`,

		'--ssmb-border-top-width-hover-tablet': `${hoverBorderTopWidthTablet || hoverBorderTopWidthDesktop || borderTopWidthTablet || borderTopWidthDesktop}px`,
		'--ssmb-border-right-width-hover-tablet': `${hoverBorderRightWidthTablet || hoverBorderRightWidthDesktop || borderRightWidthTablet || borderRightWidthDesktop}px`,
		'--ssmb-border-bottom-width-hover-tablet': `${hoverBorderBottomWidthTablet || hoverBorderBottomWidthDesktop || borderBottomWidthTablet || borderBottomWidthDesktop}px`,
		'--ssmb-border-left-width-hover-tablet': `${hoverBorderLeftWidthTablet || hoverBorderLeftWidthDesktop || borderLeftWidthTablet || borderLeftWidthDesktop}px`,

		'--ssmb-border-top-width-hover-mobile': `${hoverBorderTopWidthMobile || hoverBorderTopWidthTablet || hoverBorderTopWidthDesktop || borderTopWidthMobile || borderTopWidthTablet || borderTopWidthDesktop}px`,
		'--ssmb-border-right-width-hover-mobile': `${hoverBorderRightWidthMobile || hoverBorderRightWidthTablet || hoverBorderRightWidthDesktop || borderRightWidthMobile || borderRightWidthTablet || borderRightWidthDesktop}px`,
		'--ssmb-border-bottom-width-hover-mobile': `${hoverBorderBottomWidthMobile || hoverBorderBottomWidthTablet || hoverBorderBottomWidthDesktop || borderBottomWidthMobile || borderBottomWidthTablet || borderBottomWidthDesktop}px`,
		'--ssmb-border-left-width-hover-mobile': `${hoverBorderLeftWidthMobile || hoverBorderLeftWidthTablet || hoverBorderLeftWidthDesktop || borderLeftWidthMobile || borderLeftWidthTablet || borderLeftWidthDesktop}px`,

		'--ssmb-border-color': parsedBorderColor,
		'--ssmb-border-color-hover': parsedHoverBorderColor,

		// Box Shadow
		'--ssmb-box-shadow': `${boxShadowHOffset}px ${boxShadowVOffset}px ${boxShadowBlur}px ${boxShadowSpread}px ${parsedBoxShadowColor}`,
		'--ssmb-box-shadow-hover':
            `${hoverBoxShadowHOffset || boxShadowHOffset}px 
             ${hoverBoxShadowVOffset || boxShadowVOffset}px 
             ${hoverBoxShadowBlur || boxShadowBlur}px 
             ${hoverBoxShadowSpread || boxShadowSpread}px 
             ${parsedHoverBoxShadowColor}`,

		// Radius for top-left corner
		'--ssmb-top-left-radius': `${topLeftRadiusDesktop}px`,
		'--ssmb-top-right-radius': `${topRightRadiusDesktop}px`,
		'--ssmb-bottom-left-radius': `${bottomLeftRadiusDesktop}px`,
		'--ssmb-bottom-right-radius': `${bottomRightRadiusDesktop}px`,

		'--ssmb-top-left-radius-tablet': `${topLeftRadiusTablet || topLeftRadiusDesktop}px`,
		'--ssmb-top-right-radius-tablet': `${topRightRadiusTablet || topRightRadiusDesktop}px`,
		'--ssmb-bottom-left-radius-tablet': `${bottomLeftRadiusTablet || bottomLeftRadiusDesktop}px`,
		'--ssmb-bottom-right-radius-tablet': `${bottomRightRadiusTablet || bottomRightRadiusDesktop}px`,

		'--ssmb-top-left-radius-mobile': `${topLeftRadiusMobile || topLeftRadiusTablet || topLeftRadiusDesktop}px`,
		'--ssmb-top-right-radius-mobile': `${topRightRadiusMobile || topRightRadiusTablet || topRightRadiusDesktop}px`,
		'--ssmb-bottom-left-radius-mobile': `${bottomLeftRadiusMobile || bottomLeftRadiusTablet || bottomLeftRadiusDesktop}px`,
		'--ssmb-bottom-right-radius-mobile': `${bottomRightRadiusMobile || bottomRightRadiusTablet || bottomRightRadiusDesktop}px`,
	};

	const innerBlocksStyles = {
		// Alignment
		'--ssmb-horizontal-align': horizontalAlignDesktop,
		'--ssmb-horizontal-align-tablet': horizontalAlignTablet || horizontalAlignDesktop,
		'--ssmb-horizontal-align-mobile': horizontalAlignMobile || horizontalAlignTablet || horizontalAlignDesktop,

		'--ssmb-vertical-align': verticalAlignDesktop,
		'--ssmb-vertical-align-tablet': verticalAlignTablet || verticalAlignDesktop,
		'--ssmb-vertical-align-mobile': verticalAlignMobile || verticalAlignTablet || verticalAlignDesktop,

		// Column Gap
		'--ssmb-column-gap-size': `${columnGapDesktop}px`,
		'--ssmb-column-gap-size-tablet': `${columnGapTablet || columnGapDesktop}px`,
		'--ssmb-column-gap-size-mobile': `${columnGapMobile || columnGapTablet || columnGapDesktop}px`,

		// Row Gap
		'--ssmb-row-gap-size': `${rowGapDesktop}px`,
		'--ssmb-row-gap-size-tablet': `${rowGapTablet || rowGapDesktop}px`,
		'--ssmb-row-gap-size-mobile': `${rowGapMobile || rowGapTablet || rowGapDesktop}px`,
	};

	return { overlayStyles, blockWrapperStyles, buttonGroupWrapperStyles, innerBlocksStyles };
};
