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

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

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

const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<DynamicRepeaterAttrs>): ReactElement => {
	const selectors = {
		items: `${orderClass} .jet-listing-dynamic-repeater__items`,
		itemContent: `${orderClass} .jet-listing-dynamic-repeater__item > *`,
		itemContentHover: `${orderClass} .jet-listing-dynamic-repeater__item > *:hover`,
		delimiter: `${orderClass} .jet-listing-dynamic-repeater__delimiter`,
		counter: `${orderClass} .jet-listing-dynamic-repeater__item .jet-listing-dynamic-repeater__counter`,
	};

	const generalTypography = extractTypographyAttrs(attrs?.module?.decoration?.generalTypography);
	const generalTypographyStyles = createTypographyStyles(selectors.itemContent, generalTypography);

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

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

	const delimiterTypography = extractTypographyAttrs(attrs?.module?.decoration?.delimiterTypography);
	const delimiterTypographyStyles = createTypographyStyles(selectors.delimiter, delimiterTypography);

	const delimiterMargin = extractSpasingAttrs(attrs?.module?.decoration?.delimiterMargin);
	const delimiterMarginStyles = createSpacingStyles(selectors.delimiter, delimiterMargin);

	const counterTypography = extractTypographyAttrs(attrs?.module?.decoration?.counterItemTypography);
	const counterTypographyStyles = createTypographyStyles(selectors.counter, counterTypography);

	const counterBorder = extractBorderAttrs(attrs?.module?.decoration?.counterItemBorder);
	const counterBorderStyles = createBorderStyles(selectors.counter, counterBorder);

	const counterMargin = extractSpasingAttrs(attrs?.module?.decoration?.counterItemMargin);
	const counterMarginStyles = createSpacingStyles(selectors.counter, counterMargin);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...generalTypographyStyles,
						...itemBorderStyles,
						...itemSpacingStyles,
						...delimiterTypographyStyles,
						...delimiterMarginStyles,
						...counterTypographyStyles,
						...counterBorderStyles,
						...counterMarginStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'flex-direction',
								selector: selectors.items,
								attr: attrs?.module?.decoration?.itemsDirection,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: selectors.items,
								attr: attrs?.module?.decoration?.itemsAlignment,
							},
						},
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'align-items',
                                selector: selectors.items,
                                attr: attrs?.module?.decoration?.itemsAlignment,
                            },
                        },
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: selectors.itemContent,
								attr: attrs?.module?.decoration?.itemsAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.itemContent,
								attr: attrs?.module?.decoration?.itemColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.itemContent,
								attr: attrs?.module?.decoration?.itemBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.itemContentHover,
								attr: attrs?.module?.decoration?.itemColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.itemContentHover,
								attr: attrs?.module?.decoration?.itemBackgroundColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.itemContentHover,
								attr: attrs?.module?.decoration?.itemBorderColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.delimiter,
								attr: attrs?.module?.decoration?.delimiterColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.counter,
								attr: attrs?.module?.decoration?.counterItemColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.counter,
								attr: attrs?.module?.decoration?.counterItemBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'z-index',
								selector: selectors.counter,
								attr: attrs?.module?.decoration?.counterItemDepth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'align-self',
								selector: selectors.counter,
								attr: attrs?.module?.decoration?.counterSelfAlign,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
};

export {
	ModuleStyles,
};
