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

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

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

/**
 * Sorting module style components.
 *
 * @since ??
 */
const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<SortingAttrs>): ReactElement => {
	const selectors = {
		select: `${orderClass} .jet-sorting-select`,
		label: `${orderClass} .jet-sorting-label`,
		button: `${orderClass} .apply-filters__button`,
		buttonHover: `${orderClass} .apply-filters__button:hover`,
	};

	const selectTypography = extractTypographyAttrs(attrs?.module?.decoration?.selectTypography);
	const selectTypographyStyles = createTypographyStyles(
		selectors.select,
		selectTypography
	);

	const selectPadding = extractSpasingAttrs(attrs?.module?.decoration?.selectPadding);
	const selectPaddingStyles = createSpacingStyles(
		selectors.select,
		selectPadding
	);

	const selectBorder = extractBorderAttrs(attrs?.module?.decoration?.selectBorder);
	const selectBorderStyles = createBorderStyles(
		selectors.select,
		selectBorder
	);

	const labelTypography = extractTypographyAttrs(attrs?.module?.decoration?.labelTypography);
	const labelTypographyStyles = createTypographyStyles(
		selectors.label,
		labelTypography
	);

	const labelSpacing = extractSpasingAttrs(attrs?.module?.decoration?.labelSpacing);
	const labelPaddingLegacy = extractSpasingAttrs(attrs?.module?.decoration?.labelPadding);
	const labelMarginLegacy = extractSpasingAttrs(attrs?.module?.decoration?.labelMargin);
	const labelSpacingStyles = createSpacingStyles(selectors.label, {
		padding: labelSpacing?.padding || labelPaddingLegacy?.padding,
		margin: labelSpacing?.margin || labelMarginLegacy?.margin,
	});


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

	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 buttonBorder = extractBorderAttrs(attrs?.module?.decoration?.buttonBorder);
	const buttonBorderStyles = createBorderStyles(
		selectors.button,
		buttonBorder
	);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...selectTypographyStyles,
						...selectPaddingStyles,
						...selectBorderStyles,
						...labelTypographyStyles,
						...labelSpacingStyles,
						...buttonTypographyStyles,
						...buttonSpacingStyles,
						...buttonBorderStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'max-width',
								selector: selectors.select,
								attr: attrs?.module?.decoration?.selectWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.select,
								attr: attrs?.module?.decoration?.selectColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.select,
								attr: attrs?.module?.decoration?.selectBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'appearance',
								selector: selectors.select,
								attr: attrs?.module?.decoration?.selectResetAppearance,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: '-webkit-appearance',
								selector: selectors.select,
								attr: attrs?.module?.decoration?.selectResetAppearance,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'align-self',
								selector: selectors.label,
								attr: attrs?.module?.decoration?.labelAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.label,
								attr: attrs?.module?.decoration?.labelColor,
							},
						},
						{
							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,
};
