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

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

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

/**
 * Dynamic Module's style components.
 *
 * @since ??
 */
const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<PaginationAttrs>): ReactElement => {
	const selectors = {
		pagination: `${orderClass} .jet-filters-pagination`,
		item: `${orderClass} .jet-filters-pagination__item`,
		link: `${orderClass} .jet-filters-pagination__link`,
		currentLink: `${orderClass} .jet-filters-pagination__current .jet-filters-pagination__link`,
		dots: `${orderClass} .jet-filters-pagination__dots`,
		loadMore: `${orderClass} .jet-filters-pagination__load-more .jet-filters-pagination__link`,
		loadMoreWrapper: `${orderClass} .jet-filters-pagination__load-more`,
		linkHover: `${orderClass} .jet-filters-pagination__link:hover`,
		loadMoreHover: `${orderClass} .jet-filters-pagination__load-more .jet-filters-pagination__link:hover`,
	};

	const paginationBorder = extractBorderAttrs(attrs?.module?.decoration?.paginationBorder);
	const paginationBorderStyles = createBorderStyles(selectors.pagination, paginationBorder);

	const paginationPadding = extractSpasingAttrs(attrs?.module?.decoration?.paginationPadding);
	const paginationPaddingStyles = createSpacingStyles(selectors.pagination, paginationPadding);

	const itemsTypography = extractTypographyAttrs(attrs?.module?.decoration?.itemsTypography);
	const itemsTypographyStyles = createTypographyStyles(`${selectors.link}, ${selectors.dots}`, itemsTypography);

	const itemsPadding = extractSpasingAttrs(attrs?.module?.decoration?.itemsPadding);
	const itemsPaddingStyles = [
		...createSpacingStyles(selectors.link, itemsPadding),
		...createSpacingStyles(selectors.dots, itemsPadding),
	];

	const itemsBorder = extractBorderAttrs(attrs?.module?.decoration?.itemsBorder);
	const itemsBorderStyles = [
		...createBorderStyles(selectors.link, itemsBorder),
		...createBorderStyles(selectors.dots, itemsBorder),
	];

	const loadMoreTypography = extractTypographyAttrs(attrs?.module?.decoration?.loadMoreTypography);
	const loadMoreTypographyStyles = createTypographyStyles(selectors.loadMore, loadMoreTypography);

	const loadMoreSpacing = extractSpasingAttrs(attrs?.module?.decoration?.loadMoreSpacing);
	const loadMoreMarginLegacy = extractSpasingAttrs(attrs?.module?.decoration?.loadMoreMargin);
	const loadMorePaddingLegacy = extractSpasingAttrs(attrs?.module?.decoration?.loadMorePadding);
	const loadMoreMarginStyles = [
		{
			componentName: 'divi/common' as const,
			props: {
				property: 'margin',
				selector: selectors.loadMoreWrapper,
				attr: loadMoreSpacing?.margin || loadMoreMarginLegacy?.margin,
			},
		},
	];
	const loadMorePaddingStyles = [
		{
			componentName: 'divi/common' as const,
			props: {
				property: 'padding',
				selector: selectors.loadMore,
				attr: loadMoreSpacing?.padding || loadMorePaddingLegacy?.padding,
			},
		},
	];

	const loadMoreBorder = extractBorderAttrs(attrs?.module?.decoration?.loadMoreBorder);
	const loadMoreBorderStyles = createBorderStyles(selectors.loadMore, loadMoreBorder);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...paginationBorderStyles,
						...paginationPaddingStyles,
						...itemsTypographyStyles,
						...itemsPaddingStyles,
						...itemsBorderStyles,
						...loadMoreTypographyStyles,
						...loadMoreMarginStyles,
						...loadMorePaddingStyles,
						...loadMoreBorderStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.pagination,
								attr: attrs?.module?.decoration?.paginationBackgroundColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.link,
								attr: attrs?.module?.decoration?.itemsNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.dots,
								attr: attrs?.module?.decoration?.itemsNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.link,
								attr: attrs?.module?.decoration?.itemsNormalBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.dots,
								attr: attrs?.module?.decoration?.itemsNormalBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.linkHover,
								attr: attrs?.module?.decoration?.itemsHoverColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.linkHover,
								attr: attrs?.module?.decoration?.itemsHoverBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.linkHover,
								attr: attrs?.module?.decoration?.itemsHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.currentLink,
								attr: attrs?.module?.decoration?.itemsActiveColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.currentLink,
								attr: attrs?.module?.decoration?.itemsActiveBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.currentLink,
								attr: attrs?.module?.decoration?.itemsActiveBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.dots,
								attr: attrs?.module?.decoration?.itemsDotsColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.dots,
								attr: attrs?.module?.decoration?.itemsDotsBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: `${selectors.item} ${selectors.dots}`,
								attr: attrs?.module?.decoration?.itemsDotsBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'column-gap',
								selector: selectors.pagination,
								attr: attrs?.module?.decoration?.itemsHorizontalGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'row-gap',
								selector: selectors.pagination,
								attr: attrs?.module?.decoration?.itemsVerticalGap,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: selectors.pagination,
								attr: attrs?.module?.decoration?.itemsAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.loadMore,
								attr: attrs?.module?.decoration?.loadMoreNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.loadMore,
								attr: attrs?.module?.decoration?.loadMoreNormalBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.loadMoreHover,
								attr: attrs?.module?.decoration?.loadMoreHoverColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.loadMoreHover,
								attr: attrs?.module?.decoration?.loadMoreHoverBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.loadMoreHover,
								attr: attrs?.module?.decoration?.loadMoreHoverBorderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'order',
								selector: selectors.loadMoreWrapper,
								attr: attrs?.module?.decoration?.loadMorePosition,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
}

export {
	ModuleStyles,
};
