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

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

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

/**
 * Dynamic Module's style components.
 *
 * @since ??
 */
 const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<DatePeriodFilterAttrs>): ReactElement => {
    const blockId = attrs?.blockID?.innerContent?.desktop?.value || attrs?.blockID;
    const popupSelector = blockId
        ? `#datepickers-container .jet-date-period-${blockId}.datepicker`
        : '#datepickers-container .datepicker';

    const datepickerTypography = extractTypographyAttrs(attrs?.module?.decoration?.datepickerTypography);
    const datepickerTypographyStyles = createTypographyStyles(
        `${orderClass} .jet-date-period__datepicker-button`,
        datepickerTypography
    );

    const datepickerBorder = extractBorderAttrs(attrs?.module?.decoration?.datepickerBorder);
    const datepickerBorderStyles = createBorderStyles(
        `${orderClass} .jet-date-period__datepicker-button`,
        datepickerBorder
    );

    const datepickerSpacing = extractSpasingAttrs(attrs?.module?.decoration?.datepickerSpacing);
    const datepickerSpacingStyles = createSpacingStyles(
        `${orderClass} .jet-date-period__datepicker-button`,
        datepickerSpacing
    );

    const nextPrevBorder = extractBorderAttrs(attrs?.module?.decoration?.nextPrevBorder);
    const nextPrevBorderStyles = createBorderStyles(
        `${orderClass} .jet-date-period__prev, ${orderClass} .jet-date-period__next`,
        nextPrevBorder
    );

    const calendarTypography = extractTypographyAttrs(attrs?.module?.decoration?.calendarTypography);
    const calendarTypographyStyles = createTypographyStyles(
        popupSelector,
        calendarTypography
    );

    const calendarBorder = extractBorderAttrs(attrs?.module?.decoration?.calendarBorder);
    const calendarBorderStyles = createBorderStyles(
        popupSelector,
        calendarBorder
    );

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

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

    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: [
                        ...datepickerTypographyStyles,
                        ...datepickerBorderStyles,
                        ...datepickerSpacingStyles,
                        ...nextPrevBorderStyles,
                        ...calendarTypographyStyles,
                        ...calendarBorderStyles,
                        ...labelTypographyStyles,
                        ...applyTypographyStyles,
                        ...applySpacingStyles,
                        ...applyBorderStyles,
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-date-period__datepicker-button`,
                                attr: attrs?.module?.decoration?.datepickerNormalColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .jet-date-period__datepicker-button`,
                                attr: attrs?.module?.decoration?.datepickerNormalBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-date-period__datepicker-button:hover`,
                                attr: attrs?.module?.decoration?.datepickerHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .jet-date-period__datepicker-button:hover`,
                                attr: attrs?.module?.decoration?.datepickerHoverBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'justify-content',
                                selector: `${orderClass} .jet-date-period__wrapper`,
                                attr: attrs?.module?.decoration?.datepickerAlignment,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'margin-right',
                                selector: `${orderClass} .jet-date-period__prev`,
                                attr: attrs?.module?.decoration?.nextPrevHorOffset,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'margin-left',
                                selector: `${orderClass} .jet-date-period__next`,
                                attr: attrs?.module?.decoration?.nextPrevHorOffset,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'width',
                                selector: `${orderClass} .jet-date-period__prev, ${orderClass} .jet-date-period__next`,
                                attr: attrs?.module?.decoration?.nextPrevHorWidth,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-date-period__prev, ${orderClass} .jet-date-period__next`,
                                attr: attrs?.module?.decoration?.nextPrevNormalColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .jet-date-period__prev, ${orderClass} .jet-date-period__next`,
                                attr: attrs?.module?.decoration?.nextPrevNormalBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .jet-date-period__prev:hover, ${orderClass} .jet-date-period__next:hover`,
                                attr: attrs?.module?.decoration?.nextPrevHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .jet-date-period__prev:hover, ${orderClass} .jet-date-period__next:hover`,
                                attr: attrs?.module?.decoration?.nextPrevHoverBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'border-color',
                                selector: `${orderClass} .jet-date-period__prev:hover, ${orderClass} .jet-date-period__next:hover`,
                                attr: attrs?.module?.decoration?.nextPrevHoverBorderColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'margin-top',
                                selector: popupSelector,
                                attr: attrs?.module?.decoration?.calendarVerOffset,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'margin-left',
                                selector: popupSelector,
                                attr: attrs?.module?.decoration?.calendarHorOffset,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'width',
                                selector: popupSelector,
                                attr: attrs?.module?.decoration?.calendarWidth,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: popupSelector,
                                attr: attrs?.module?.decoration?.calendarBgColor,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${popupSelector} .datepicker--cell`,
                                attr: attrs?.module?.decoration?.cellNormalColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${popupSelector} .datepicker--cell`,
                                attr: attrs?.module?.decoration?.cellNormalBgColor,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${popupSelector} .datepicker--cell.-focus-,
                                        ${popupSelector} .datepicker--cell.-in-range-.-focus-,
                                        ${popupSelector} .datepicker--cell.-week-hover-,
                                        ${popupSelector} .datepicker--cell.-range-from-,
                                        ${popupSelector} .datepicker--cell.-range-to-`,
                                attr: attrs?.module?.decoration?.cellHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${popupSelector} .datepicker--cell.-focus-,
                                        ${popupSelector} .datepicker--cell.-in-range-.-focus-,
                                        ${popupSelector} .datepicker--cell.-week-hover-,
                                        ${popupSelector} .datepicker--cell.-range-from-,
                                        ${popupSelector} .datepicker--cell.-range-to-`,
                                attr: attrs?.module?.decoration?.cellHoverBgColor,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${popupSelector} .datepicker--cell.-selected-,
                                        ${popupSelector} .datepicker--cell.-week-selected-`,
                                attr: attrs?.module?.decoration?.cellActiveColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${popupSelector} .datepicker--cell.-selected-,
                                        ${popupSelector} .datepicker--cell.-week-selected-`,
                                attr: attrs?.module?.decoration?.cellActiveBgColor,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${popupSelector} .datepicker--cell.-current-`,
                                attr: attrs?.module?.decoration?.cellCurrentColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${popupSelector} .datepicker--cell.-current-`,
                                attr: attrs?.module?.decoration?.cellCurrentBgColor,
                            }
                        },


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

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

                        // Apply Filter Button styles
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .apply-filters__button`,
                                attr: attrs?.module?.decoration?.applyNormalColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .apply-filters__button`,
                                attr: attrs?.module?.decoration?.applyNormalBgColor,
                            }
                        },

                        {
                            componentName: "divi/common",
                            props: {
                                property: 'color',
                                selector: `${orderClass} .apply-filters__button:hover`,
                                attr: attrs?.module?.decoration?.applyHoverColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'background-color',
                                selector: `${orderClass} .apply-filters__button:hover`,
                                attr: attrs?.module?.decoration?.applyHoverBgColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'border-color',
                                selector: `${orderClass} .apply-filters__button:hover`,
                                attr: attrs?.module?.decoration?.applyHoverBorderColor,
                            }
                        },
                        {
                            componentName: "divi/common",
                            props: {
                                property: 'align-self',
                                selector: `${orderClass} .apply-filters__button`,
                                attr: attrs?.module?.decoration?.applyAlignment,
                            }
                        },

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

export {
	ModuleStyles,
};
