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

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

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

const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<DynamicMetaAttrs>): ReactElement => {
	const selectors = {
		wrapper: `${orderClass} .jet-listing-dynamic-meta`,
		item: `${orderClass} .jet-listing-dynamic-meta__item`,
		itemHover: `${orderClass} .jet-listing-dynamic-meta__item:hover`,
		itemVal: `${orderClass} .jet-listing-dynamic-meta__item-val`,
		itemValHover: `${orderClass} .jet-listing-dynamic-meta__item-val:hover`,
		itemAndValue: `${orderClass} .jet-listing-dynamic-meta__item, ${orderClass} .jet-listing-dynamic-meta__item-val`,
		itemAndValueHover: `${orderClass} .jet-listing-dynamic-meta__item:hover, ${orderClass} .jet-listing-dynamic-meta__item-val:hover`,
		iconSvgPath: `${orderClass} .jet-listing-dynamic-meta__icon svg path`,
		iconSvg: `${orderClass} .jet-listing-dynamic-meta__icon svg`,
		iconImg: `${orderClass} .jet-listing-dynamic-meta__icon img`,
		iconSvgLtr: `body:not(.rtl) ${orderClass} .jet-listing-dynamic-meta__icon svg`,
		iconImgLtr: `body:not(.rtl) ${orderClass} .jet-listing-dynamic-meta__icon img`,
		iconSvgRtl: `body.rtl ${orderClass} .jet-listing-dynamic-meta__icon svg`,
		iconImgRtl: `body.rtl ${orderClass} .jet-listing-dynamic-meta__icon img`,
		prefix: `${orderClass} .jet-listing-dynamic-meta__prefix`,
		suffix: `${orderClass} .jet-listing-dynamic-meta__suffix`,
	};

	const itemTypography = extractTypographyAttrs(attrs?.module?.decoration?.itemTypography);
	const itemTypographyStyles = createTypographyStyles(selectors.itemAndValue, itemTypography);

	const itemBorder = extractBorderAttrs(attrs?.module?.decoration?.itemBorder);
	const itemBorderStyles = createBorderStyles(selectors.item, itemBorder);

	const itemSpacing = extractSpasingAttrs(attrs?.module?.decoration?.itemSpacing);
	const itemSpacingStyles = createSpacingStyles(selectors.item, itemSpacing);

	const itemValBorder = extractBorderAttrs(attrs?.module?.decoration?.itemValBorder);
	const itemValBorderStyles = createBorderStyles(selectors.itemVal, itemValBorder);

	const itemValSpacing = extractSpasingAttrs(attrs?.module?.decoration?.itemValSpacing);
	const itemValSpacingStyles = createSpacingStyles(selectors.itemVal, itemValSpacing);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...itemTypographyStyles,
						...itemBorderStyles,
						...itemSpacingStyles,
						...itemValBorderStyles,
						...itemValSpacingStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: selectors.wrapper,
								attr: attrs?.module?.decoration?.metaAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.item,
								attr: attrs?.module?.decoration?.itemBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.itemAndValue,
								attr: attrs?.module?.decoration?.itemColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.itemHover,
								attr: attrs?.module?.decoration?.itemBgColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.itemAndValueHover,
								attr: attrs?.module?.decoration?.itemColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.itemHover,
								attr: attrs?.module?.decoration?.itemHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'fill',
								selector: selectors.iconSvgPath,
								attr: attrs?.module?.decoration?.iconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.iconSvg,
								attr: attrs?.module?.decoration?.iconSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.iconImg,
								attr: attrs?.module?.decoration?.iconSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.iconSvgLtr,
								attr: attrs?.module?.decoration?.iconGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.iconImgLtr,
								attr: attrs?.module?.decoration?.iconGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.iconSvgRtl,
								attr: attrs?.module?.decoration?.iconGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.iconImgRtl,
								attr: attrs?.module?.decoration?.iconGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.itemVal,
								attr: attrs?.module?.decoration?.itemValBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.itemVal,
								attr: attrs?.module?.decoration?.itemValColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.itemValHover,
								attr: attrs?.module?.decoration?.itemValBgColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.itemValHover,
								attr: attrs?.module?.decoration?.itemValColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.itemValHover,
								attr: attrs?.module?.decoration?.itemValHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.prefix,
								attr: attrs?.module?.decoration?.prefixLGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.prefix,
								attr: attrs?.module?.decoration?.prefixRGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-left',
								selector: selectors.suffix,
								attr: attrs?.module?.decoration?.suffixLGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-right',
								selector: selectors.suffix,
								attr: attrs?.module?.decoration?.suffixRGap,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
};

export {
	ModuleStyles,
};
