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

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

// Local dependencies.
import { RatingFilterAttrs } 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<RatingFilterAttrs>): ReactElement => {
    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 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: [
                        ...labelTypographyStyles,
                        ...labelSpacingStyles,
                        ...buttonSpacingStyles,
                        ...buttonBorderStyles,

                        // Stars.
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'font-size',
                                selector: `${orderClass} .jet-rating .jet-rating-star__icon`,
                                attr: attrs?.module?.decoration?.starsSize,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'margin-left',
                                selector: `${orderClass} .jet-rating .jet-rating-star__icon`,
                                attr: attrs?.module?.decoration?.starsGutter,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-rating .jet-rating-star__label`,
                                attr: attrs?.module?.decoration?.starsColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: [
                                    `${orderClass} .jet-rating input.is-checked ~ label`,
                                    `${orderClass} .jet-rating:not(.is-checked) label:hover`,
                                    `${orderClass} .jet-rating:not(.is-checked) label:hover ~ label`,
                                ].join(', '),
                                attr: attrs?.module?.decoration?.starsSelectedColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'color',
                                selector: [
                                    `${orderClass} .jet-rating input.is-checked + label:hover`,
                                    `${orderClass} .jet-rating input.is-checked ~ label:hover`,
                                    `${orderClass} .jet-rating label:hover ~ input.is-checked ~ label`,
                                    `${orderClass} .jet-rating input.is-checked ~ label:hover ~ label`,
                                ].join(', '),
                                attr: attrs?.module?.decoration?.starsSelectedHoverColor,
                            },
                        },
                        {
                            componentName: 'divi/common',
                            props: {
                                property: 'text-align',
                                selector: `${orderClass} .jet-rating .jet-rating__control`,
                                attr: attrs?.module?.decoration?.starsAlignment,
                            },
                        },

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

                        // Apply 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 };
