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

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

// Local dependencies.
import { ActiveFiltersAttrs } 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<ActiveFiltersAttrs>): ReactElement => {

    const titleTypography = extractTypographyAttrs(attrs?.module?.decoration?.titleTypography);
    const titleTypographyStyles = createTypographyStyles(
        `${orderClass} .jet-smart-filters-active .jet-active-filters__title`,
        titleTypography
    );

    const filtersTypography = extractTypographyAttrs(attrs?.module?.decoration?.filtersTypography);
    const filtersTypographyStyles = createTypographyStyles(
        `${orderClass} .jet-smart-filters-active .jet-active-filter`,
        filtersTypography
    );

    const filterSpacing = extractSpasingAttrs(attrs?.module?.decoration?.filterSpacing);
    const filterSpacingStyles = createSpacingStyles(
        `${orderClass} .jet-smart-filters-active .jet-active-filter`,
        filterSpacing
    );

    const filterBorder = extractBorderAttrs(attrs?.module?.decoration?.filterBorder);
    const filterBorderStyles = createBorderStyles(
        `${orderClass} .jet-smart-filters-active .jet-active-filter`,
        filterBorder
    );



    /*const applySpacing = extractSpasingAttrs(attrs?.module?.decoration?.applySpacing);
    const applySpacingStyles = createSpacingStyles(
        `${orderClass} .apply-filters__button`,
        applySpacing
    );

    const applyBorder = extractBorderAttrs(attrs?.module?.decoration?.applyBorder);
    const applyBorderStyles = createBorderStyles(
        `${orderClass} .apply-filters__button`,
        applyBorder
    );*/

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
                    advancedStyles: [
                        ...titleTypographyStyles,
                        ...filtersTypographyStyles,
                        ...filterSpacingStyles,
                        ...filterBorderStyles,
                       // ...applySpacingStyles,
                       // ...applyBorderStyles,
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filters__title`,
                                attr: attrs?.module?.decoration?.titleColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'flex-direction',
                                selector: `${orderClass} .jet-smart-filters-active, ${orderClass} .jet-smart-filters-active .jet-active-filters__list`,
                                attr: attrs?.module?.decoration?.filtersPosition,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'gap',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filters__list`,
                                attr: attrs?.module?.decoration?.filtersGap,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filter`,
                                attr: attrs?.module?.decoration?.filterColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filter`,
                                attr: attrs?.module?.decoration?.filterBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filter:hover`,
                                attr: attrs?.module?.decoration?.filterHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filter:hover`,
                                attr: attrs?.module?.decoration?.filterHoverBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'font-size',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filter__remove`,
                                attr: attrs?.module?.decoration?.removeSize,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-smart-filters-active .jet-active-filter__remove`,
                                attr: attrs?.module?.decoration?.removeColor,
                            }
                        },


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

export {
	ModuleStyles,
};
