import React, { ReactElement } from 'react';
import { StyleContainer, StylesProps, TextStyle } from '@divi/module';

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

const ModuleStyles = ({
                          settings,
                          mode,
                          state,
                          noStyleTag,
                          elements,
                          attrs,
                      orderClass,
                      }: StylesProps<SelectFilterAttrs>): ReactElement => {
    const mapHierarchicalPosition = (value?: string | number | null): string => {
        if ('line' === value || 'flex' === value) {
            return 'flex';
        }

        return 'block';
    };

    const selectTypography = extractTypographyAttrs(attrs?.module?.decoration?.selectTypography);
    const selectTypographyStyles = createTypographyStyles(
        `${orderClass} .jet-select__control`,
        selectTypography
    );

    const selectSpacing = extractSpasingAttrs(attrs?.module?.decoration?.selectSpacing);
    const selectSpacingStyles = createSpacingStyles(
        `${orderClass} .jet-select__control`,
        selectSpacing
    );

    const selectBorder = extractBorderAttrs(attrs?.module?.decoration?.selectBorder);
    const selectBorderStyles = createBorderStyles(
        `${orderClass} .jet-select__control`,
        selectBorder
    );

    const labelTypography = extractTypographyAttrs(attrs?.module?.decoration?.labelTypography);
    const labelTypographyStyles = createTypographyStyles(
        `${orderClass} .jet-filter-label`,
        labelTypography
    );

    const labelSpacing = extractSpasingAttrs(attrs?.module?.decoration?.labelSpacing);
    const labelSpacingStyles = createSpacingStyles(
        `${orderClass} .jet-filter-label`,
        labelSpacing
    );

    const buttonTypography = extractTypographyAttrs(attrs?.module?.decoration?.buttonTypography);
    const buttonTypographyStyles = createTypographyStyles(
        `${orderClass} .apply-filters__button`,
        buttonTypography
    );

    const buttonSpacing = extractSpasingAttrs(attrs?.module?.decoration?.buttonSpacing);
    const buttonSpacingStyles = createSpacingStyles(
        `${orderClass} .apply-filters__button`,
        buttonSpacing
    );

    const buttonBorder = extractBorderAttrs(attrs?.module?.decoration?.buttonBorder);
    const buttonBorderStyles = createBorderStyles(
        `${orderClass} .apply-filters__button`,
        buttonBorder
    );

    return (
        <StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
            {elements.style({
                attrName: 'module',
                styleProps: {
                    disabledOn: { disabledModuleVisibility: settings?.disabledModuleVisibility },
                    advancedStyles: [
                        ...selectTypographyStyles,
                        ...selectSpacingStyles,
                        ...selectBorderStyles,
                        ...labelTypographyStyles,
                        ...labelSpacingStyles,
                        ...buttonTypographyStyles,
                        ...buttonSpacingStyles,
                        ...buttonBorderStyles,

                        // Content.
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'max-width',
                                selector: `${orderClass} .jet-smart-filters-select.jet-filter .jet-select, ${orderClass} .jet-smart-filters-hierarchy.jet-filter .jet-select__control`,
                                attr: attrs?.module?.decoration?.selectWidth,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'flex-basis',
                                selector: `${orderClass} .jet-smart-filters-select.jet-filter .jet-select, ${orderClass} .jet-smart-filters-hierarchy.jet-filter .jet-select__control`,
                                attr: attrs?.module?.decoration?.selectWidth,
                            },
                        },

                        // Hierarchical.
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'display',
                                selector: `${orderClass} .jet-smart-filters-hierarchy.jet-filter .jet-filters-group`,
                                attr: attrs?.module?.decoration?.hierarchicalPosition,
                                declarationFunction: ({ attrValue }) => mapHierarchicalPosition(attrValue as string),
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'margin-top',
                                selector: `${orderClass} .jet-smart-filters-hierarchy.jet-filter .jet-filters-group .jet-select + .jet-select`,
                                attr: attrs?.module?.decoration?.hierarchicalVerticalOffset,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'width',
                                selector: `${orderClass} .jet-smart-filters-hierarchy.jet-filter .jet-select`,
                                attr: attrs?.module?.decoration?.hierarchicalItemWidth,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'gap',
                                selector: `${orderClass} .jet-smart-filters-hierarchy.jet-filter .jet-filters-group`,
                                attr: attrs?.module?.decoration?.hierarchicalHorizontalOffset,
                            },
                        },

                        // Select.
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-select__control`,
                                attr: attrs?.module?.decoration?.selectColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-select__control option:disabled`,
                                attr: attrs?.module?.decoration?.selectDisabledColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .jet-select__control`,
                                attr: attrs?.module?.decoration?.selectBgColor,
                            },
                        },

                        // Label.
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'text-align',
                                selector: `${orderClass} .jet-filter-label`,
                                attr: attrs?.module?.decoration?.labelAlignment,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-filter-label`,
                                attr: attrs?.module?.decoration?.labelColor,
                            },
                        },

                        // Button.
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: `${orderClass} .apply-filters__button`,
                                attr: attrs?.module?.decoration?.buttonTextColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .apply-filters__button`,
                                attr: attrs?.module?.decoration?.buttonBgColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: `${orderClass} .apply-filters__button:hover`,
                                attr: attrs?.module?.decoration?.buttonHoverTextColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .apply-filters__button:hover`,
                                attr: attrs?.module?.decoration?.buttonHoverBgColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'border-color',
                                selector: `${orderClass} .apply-filters__button:hover`,
                                attr: attrs?.module?.decoration?.buttonHoverBorderColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'align-self',
                                selector: `${orderClass} .apply-filters__button`,
                                attr: attrs?.module?.decoration?.buttonAlignment,
                            },
                        },
                    ],
                },
            })}
        </StyleContainer>
    );
};

export { ModuleStyles };
