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

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

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

const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<DynamicFieldAttrs>): ReactElement => {
	const selectors = {
		wrapper: `${orderClass} .jet-listing-dynamic-field`,
		displayInline: `${orderClass} .jet-listing-dynamic-field.display-inline`,
		displayMultiline: `${orderClass} .jet-listing-dynamic-field.display-multiline`,
		inlineWrap: `${orderClass} .jet-listing-dynamic-field__inline-wrap`,
		content: `${orderClass} .jet-listing-dynamic-field__content`,
		contentLink: `${orderClass} .jet-listing-dynamic-field__content a`,
		icon: `${orderClass} .jet-listing-dynamic-field__icon`,
		iconSvgPath: `${orderClass} .jet-listing-dynamic-field__icon svg path`,
		iconLtr: `body:not(.rtl) ${orderClass} .jet-listing-dynamic-field__icon`,
		iconRtl: `body.rtl ${orderClass} .jet-listing-dynamic-field__icon`,
		fieldBoxCombined: `${orderClass} .jet-listing-dynamic-field.display-multiline, ${orderClass} .jet-listing-dynamic-field.display-inline .jet-listing-dynamic-field__inline-wrap, ${orderClass} .jet-listing-dynamic-field__content`,
	};

	const fieldTypography = extractTypographyAttrs(attrs?.module?.decoration?.fieldTypography);
	const fieldTypographyStyles = createTypographyStyles(selectors.content, fieldTypography);

	const fieldBorder = extractBorderAttrs(attrs?.module?.decoration?.fieldBorder);
	const fieldBorderStyles = createBorderStyles(selectors.fieldBoxCombined, fieldBorder);

	const fieldSpacing = extractSpasingAttrs(attrs?.module?.decoration?.fieldSpacing);
	const fieldSpacingStyles = createSpacingStyles(selectors.fieldBoxCombined, fieldSpacing);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...fieldTypographyStyles,
						...fieldBorderStyles,
						...fieldSpacingStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.content,
								attr: attrs?.module?.decoration?.fieldColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.contentLink,
								attr: attrs?.module?.decoration?.fieldColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-transform',
								selector: selectors.contentLink,
								attr: fieldTypography?.textTransform,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-style',
								selector: selectors.contentLink,
								attr: fieldTypography?.fontStyle,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-decoration',
								selector: selectors.contentLink,
								attr: fieldTypography?.textDecoration,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: selectors.content,
								attr: attrs?.module?.decoration?.contentAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.fieldBoxCombined,
								attr: attrs?.module?.decoration?.fieldBg,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.inlineWrap,
								attr: attrs?.module?.decoration?.fieldWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.content,
								attr: attrs?.module?.decoration?.fieldWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: selectors.displayInline,
								attr: attrs?.module?.decoration?.fieldAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.icon,
								attr: attrs?.module?.decoration?.iconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'fill',
								selector: selectors.iconSvgPath,
								attr: attrs?.module?.decoration?.iconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: selectors.icon,
								attr: attrs?.module?.decoration?.iconSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.iconLtr,
								attr: attrs?.module?.decoration?.iconGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.iconRtl,
								attr: attrs?.module?.decoration?.iconGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-top',
								selector: selectors.icon,
								attr: attrs?.module?.decoration?.iconVerticalGap,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
};

export {
	ModuleStyles,
};
