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

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

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

const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<DynamicTermsAttrs>): ReactElement => {
	const selectors = {
		wrapper: `${orderClass} .jet-listing-dynamic-terms`,
		link: `${orderClass} .jet-listing-dynamic-terms__link`,
		linkHover: `${orderClass} .jet-listing-dynamic-terms__link:hover`,
		icon: `${orderClass} .jet-listing-dynamic-terms__icon`,
		iconPath: `${orderClass} .jet-listing-dynamic-terms__icon svg path`,
		iconSvg: `${orderClass} .jet-listing-dynamic-terms__icon svg`,
		iconLtr: `body:not(.rtl) ${orderClass} .jet-listing-dynamic-terms__icon`,
		iconRtl: `body.rtl ${orderClass} .jet-listing-dynamic-terms__icon`,
		delimiter: `${orderClass} .jet-listing-dynamic-terms__delimiter`,
		prefix: `${orderClass} .jet-listing-dynamic-terms__prefix`,
		prefixLtr: `body:not(.rtl) ${orderClass} .jet-listing-dynamic-terms__prefix`,
		prefixRtl: `body.rtl ${orderClass} .jet-listing-dynamic-terms__prefix`,
		suffix: `${orderClass} .jet-listing-dynamic-terms__suffix`,
		suffixLtr: `body:not(.rtl) ${orderClass} .jet-listing-dynamic-terms__suffix`,
		suffixRtl: `body.rtl ${orderClass} .jet-listing-dynamic-terms__suffix`,
	};

	const linkTypography = extractTypographyAttrs(attrs?.module?.decoration?.linkTypography);
	const linkTypographyStyles = createTypographyStyles(selectors.link, linkTypography);

	const linkBorder = extractBorderAttrs(attrs?.module?.decoration?.linkBorder);
	const linkBorderStyles = createBorderStyles(selectors.link, linkBorder);

	const linkSpacing = extractSpasingAttrs(attrs?.module?.decoration?.linkSpacing);
	const linkSpacingStyles = createSpacingStyles(selectors.link, linkSpacing);

	const prefixTypography = extractTypographyAttrs(attrs?.module?.decoration?.prefixTypography);
	const prefixTypographyStyles = createTypographyStyles(selectors.prefix, prefixTypography);

	const suffixTypography = extractTypographyAttrs(attrs?.module?.decoration?.suffixTypography);
	const suffixTypographyStyles = createTypographyStyles(selectors.suffix, suffixTypography);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...linkTypographyStyles,
						...linkBorderStyles,
						...linkSpacingStyles,
						...prefixTypographyStyles,
						...suffixTypographyStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: selectors.wrapper,
								attr: attrs?.module?.decoration?.termsAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.link,
								attr: attrs?.module?.decoration?.linkBg,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.link,
								attr: attrs?.module?.decoration?.linkColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.linkHover,
								attr: attrs?.module?.decoration?.linkBgHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.linkHover,
								attr: attrs?.module?.decoration?.linkColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.linkHover,
								attr: attrs?.module?.decoration?.linkHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.icon,
								attr: attrs?.module?.decoration?.iconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'fill',
								selector: selectors.iconPath,
								attr: attrs?.module?.decoration?.iconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.iconSvg,
								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: 'color',
								selector: selectors.delimiter,
								attr: attrs?.module?.decoration?.delimiterColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: selectors.delimiter,
								attr: attrs?.module?.decoration?.delimiterSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.delimiter,
								attr: attrs?.module?.decoration?.delimiterLGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.delimiter,
								attr: attrs?.module?.decoration?.delimiterRGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.prefix,
								attr: attrs?.module?.decoration?.prefixColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.prefixLtr,
								attr: attrs?.module?.decoration?.prefixGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.prefixRtl,
								attr: attrs?.module?.decoration?.prefixGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.suffix,
								attr: attrs?.module?.decoration?.suffixColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.suffixLtr,
								attr: attrs?.module?.decoration?.suffixGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.suffixRtl,
								attr: attrs?.module?.decoration?.suffixGap,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
};

export {
	ModuleStyles,
};
