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

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

// Local dependencies.
import { ActiveTagsAttrs } from './types';
import {
    createBorderStyles,
    createSpacingStyles,
    createTypographyStyles,
    extractBorderAttrs,
    extractSpasingAttrs,
    extractTypographyAttrs
} from "../../utils";
import type {BorderValue} from "../custom-types";

/**
 * Dynamic Module's style components.
 *
 * @since ??
 */
 const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<ActiveTagsAttrs>): ReactElement => {

    const selectors = {
        tags: `${orderClass} .jet-smart-filters-active-tags`,
        tagsList: `${orderClass} .jet-active-tags__list`,
        tagsTitle: `${orderClass} .jet-active-tags__title`,
        tag: `${orderClass} .jet-active-tag`,
        tagLabel: `${orderClass} .jet-active-tag__label`,
        tagValue: `${orderClass} .jet-active-tag__val`,
        tagRemove: `${orderClass} .jet-active-tag__remove`,
        tagClear: `${orderClass} .jet-active-tag--clear`,
    };

    const titleTypography = extractTypographyAttrs(attrs?.module?.decoration?.titleTypography);
    const titleTypographyStyles = createTypographyStyles(
        selectors.tagsTitle,
        titleTypography
    );

    const titleMargin = extractSpasingAttrs(attrs?.module?.decoration?.titleMargin);
    const titleMarginStyles = createSpacingStyles(
        selectors.tagsTitle,
        titleMargin
    );

    const filtersBorder = extractBorderAttrs(attrs?.module?.decoration?.filtersBorder);
    const filtersBorderStyles = createBorderStyles(
        selectors.tagsList,
        filtersBorder
    );

    const filtersPadding = extractSpasingAttrs(attrs?.module?.decoration?.filtersPadding);
    const filtersPaddingStyles = createSpacingStyles(
        selectors.tagsList,
        filtersPadding
    );

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

    const itemPadding = extractSpasingAttrs(attrs?.module?.decoration?.itemPadding);
    const itemPaddingStyles = createSpacingStyles(
        selectors.tag,
        itemPadding
    );

    const labelTypography = extractTypographyAttrs(attrs?.module?.decoration?.labelTypography);
    const labelTypographyStyles = createTypographyStyles(
        selectors.tagLabel,
        labelTypography
    );

    const valueTypography = extractTypographyAttrs(attrs?.module?.decoration?.valueTypography);
    const valueTypographyStyles = createTypographyStyles(
        selectors.tagValue,
        valueTypography
    );

    const removeBorder = extractBorderAttrs(attrs?.module?.decoration?.removeBorder);
    const removeBorderStyles = createBorderStyles(
        selectors.tagRemove,
        removeBorder
    );

    const removePadding = extractSpasingAttrs(attrs?.module?.decoration?.removePadding);
    const removePaddingStyles = createSpacingStyles(
        selectors.tagRemove,
        removePadding
    );

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
                    advancedStyles: [
                        ...titleTypographyStyles,
                        ...titleMarginStyles,
                        ...filtersBorderStyles,
                        ...filtersPaddingStyles,
                        ...itemBorderStyles,
                        ...itemPaddingStyles,
                        ...labelTypographyStyles,
                        ...valueTypographyStyles,
                        ...removeBorderStyles,
                        ...removePaddingStyles,
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: selectors.tagsTitle,
                                attr: attrs?.module?.decoration?.titleColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'flex-direction',
                                selector: `${selectors.tags}, ${selectors.tagsList}`,
                                attr: attrs?.module?.decoration?.filtersPosition,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'margin-right',
                                selector: selectors.tag,
                                attr: attrs?.module?.decoration?.filtersGapHorizontal,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'margin-bottom',
                                selector: selectors.tag,
                                attr: attrs?.module?.decoration?.filtersGapVertical,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: selectors.tagsList,
                                attr: attrs?.module?.decoration?.filtersBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'align-items',
                                selector: selectors.tagsList,
                                attr: attrs?.module?.decoration?.filtersAlignItems,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'justify-content',
                                selector: selectors.tagsList,
                                attr: attrs?.module?.decoration?.filtersJustifyContent,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'min-width',
                                selector: selectors.tag,
                                attr: attrs?.module?.decoration?.itemMinWidth,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'flex-direction',
                                selector: selectors.tag,
                                attr: attrs?.module?.decoration?.itemPosition,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: selectors.tag,
                                attr: attrs?.module?.decoration?.itemBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${selectors.tag}:hover`,
                                attr: attrs?.module?.decoration?.itemHoverBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'border-color',
                                selector: `${selectors.tag}:hover`,
                                attr: attrs?.module?.decoration?.itemHoverBorderColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${selectors.tagClear} ${selectors.tagValue}`,
                                attr: attrs?.module?.decoration?.clearItemColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: selectors.tagClear,
                                attr: attrs?.module?.decoration?.clearItemBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${selectors.tagClear}:hover ${selectors.tagValue}`,
                                attr: attrs?.module?.decoration?.clearItemHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${selectors.tagClear}:hover`,
                                attr: attrs?.module?.decoration?.clearItemHoverBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: selectors.tagLabel,
                                attr: attrs?.module?.decoration?.labelColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${selectors.tag}:hover ${selectors.tagLabel}`,
                                attr: attrs?.module?.decoration?.labelHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: selectors.tagValue,
                                attr: attrs?.module?.decoration?.valueColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${selectors.tag}:hover ${selectors.tagValue}`,
                                attr: attrs?.module?.decoration?.valueHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'font-size',
                                selector: selectors.tagRemove,
                                attr: attrs?.module?.decoration?.removeSize,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'top',
                                selector: selectors.tagRemove,
                                attr: attrs?.module?.decoration?.removeOffsetTop,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'right',
                                selector: selectors.tagRemove,
                                attr: attrs?.module?.decoration?.removeOffsetRight,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: selectors.tagRemove,
                                attr: attrs?.module?.decoration?.removeColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: selectors.tagRemove,
                                attr: attrs?.module?.decoration?.removeBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${selectors.tag}:hover ${selectors.tagRemove}`,
                                attr: attrs?.module?.decoration?.removeHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${selectors.tag}:hover ${selectors.tagRemove}`,
                                attr: attrs?.module?.decoration?.removeHoverBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'border-color',
                                selector: `${selectors.tag}:hover ${selectors.tagRemove}`,
                                attr: attrs?.module?.decoration?.removeHoverBorderColor,
                            }
                        },


                    ]
				},
			})}
		</StyleContainer>
	);
}

export {
	ModuleStyles,
};
