/*
 * Generate classes for block
 */

export const hexToRgb = ( hex ) => {
	var bigint = parseInt( hex.replace( '#', '' ), 16 );
	var r = ( bigint >> 16 ) & 255;
	var g = ( bigint >> 8 ) & 255;
	var b = bigint & 255;
	return `${r}, ${g}, ${b}`;
};

export const generateBlockClasses = ( {
	// Layout Panel
	alignmentMode, flexWrap, fullWidth,

	// Background Panel
	backgroundMode,
	backgroundImageDesktop, backgroundImageTablet, backgroundImageMobile,
	backgroundImageURLDesktop, backgroundImageURLTablet, backgroundImageURLMobile,
	backgroundFixed,

	// Border Panel
	borderStyle, borderColor,

	uniqueClass,
} ) => {
	const alignmentClass = alignmentMode === 'horizontal'
		? 'ssmb-horizontal-align'
		: 'ssmb-vertical-align';
	const flexWrapClass = flexWrap ? `ssmb-flex-${flexWrap}` : '';
	const fullWidthClass = fullWidth ? 'ssmb-full-width' : '';

	const contentVerticalAlignClass = 'ssmb-content-vertical-align';

	const contentHorizontalAlignClass = 'ssmb-content-horizontal-align';

	const backgroundImageClass = ( backgroundImageDesktop || backgroundImageTablet || backgroundImageMobile || backgroundImageURLDesktop || backgroundImageURLTablet || backgroundImageURLMobile ) ? 'ssmb-background-image' : '';

	const backgroundFixedClass = backgroundFixed ? 'ssmb-background-fixed' : '';
	const backgroundGradientClass = (
		!backgroundImageDesktop && !backgroundImageTablet && !backgroundImageMobile &&
        !backgroundImageURLDesktop && !backgroundImageURLTablet && !backgroundImageURLMobile &&
        backgroundMode === 'gradient'
	) ? 'ssmb-background-gradient' : '';

	const borderStyleClass = `ssmb-border-${borderStyle}`;
	const borderColorClass = borderColor ? 'ssmb-border-color' : '';

	return {
		blockWrapperClasses: `ssmb-block-wrapper ${uniqueClass} ${contentHorizontalAlignClass} ${borderStyleClass} ${borderColorClass}`,
		buttonGroupWrapperClasses: `ssmb-button-group-wrapper ${uniqueClass}-button-group ${backgroundImageClass} ${backgroundFixedClass} ${backgroundGradientClass}`,
		innerBlockEditorClasses: `ssmb-block-editor-inner-blocks ${uniqueClass}-button-list ${alignmentClass} ${fullWidthClass} ${flexWrapClass} ${contentVerticalAlignClass}`
	};
};
