// External dependencies.
import React, { ReactElement } from 'react';

// Divi dependencies.
import {
	StyleContainer,
	StylesProps,
} from '@divi/module';

// Local dependencies.
import { RemoveFiltersAttrs } from './types';
import {
	createBorderStyles,
	createSpacingStyles,
	createTypographyStyles,
	extractBorderAttrs,
	extractSpasingAttrs,
	extractTypographyAttrs,
} from '../../utils';

/**
 * Dynamic Module's style components.
 *
 * @since ??
 */
const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<RemoveFiltersAttrs>): ReactElement => {
	const selectors = {
		button: `${orderClass} .jet-remove-all-filters__button`,
		buttonHover: `${orderClass} .jet-remove-all-filters__button:hover`,
	};

	const typography = extractTypographyAttrs(attrs?.module?.decoration?.buttonTypography);
	const typographyStyles = createTypographyStyles(selectors.button, typography);

	const buttonSpacing = extractSpasingAttrs(attrs?.module?.decoration?.buttonSpacing);
	const buttonPaddingLegacy = extractSpasingAttrs(attrs?.module?.decoration?.buttonPadding);
	const buttonMarginLegacy = extractSpasingAttrs(attrs?.module?.decoration?.buttonMargin);
	const buttonSpacingStyles = createSpacingStyles(selectors.button, {
		padding: buttonSpacing?.padding || buttonPaddingLegacy?.padding,
		margin: buttonSpacing?.margin || buttonMarginLegacy?.margin,
	});

	const border = extractBorderAttrs(attrs?.module?.decoration?.buttonBorder);
	const borderStyles = createBorderStyles(selectors.button, border);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...typographyStyles,
						...buttonSpacingStyles,
						...borderStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.buttonNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.buttonNormalBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.buttonHover,
								attr: attrs?.module?.decoration?.buttonHoverColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.buttonHover,
								attr: attrs?.module?.decoration?.buttonHoverBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.buttonHover,
								attr: attrs?.module?.decoration?.buttonHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'align-self',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.buttonAlignment,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
}

export {
	ModuleStyles,
};
