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

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

// Local dependencies.
import { AlphabetAttrs } 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<AlphabetAttrs>): ReactElement => {
	const selectors = {
		listWrapper: `${orderClass} .jet-alphabet-list-wrapper > fieldset`,
		listItem: `${orderClass} .jet-alphabet-list__row`,
		button: `${orderClass} .jet-alphabet-list__button`,
		checkedButton: `${orderClass} .jet-alphabet-list__input:checked ~ .jet-alphabet-list__button`,
	};

	const itemTypography = extractTypographyAttrs(attrs?.module?.decoration?.itemTypography);
	const itemTypographyStyles = createTypographyStyles(
		selectors.button,
		itemTypography
	);
	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 itemPadding = extractSpasingAttrs(attrs?.module?.decoration?.itemPadding);
	const itemPaddingStyles = createSpacingStyles(
		selectors.button,
		itemPadding
	);
	const applySpacing = extractSpasingAttrs(attrs?.module?.decoration?.applySpacing);
	const applySpacingStyles = createSpacingStyles(
		`${orderClass} .apply-filters__button`,
		applySpacing
	);

	const itemBorder = extractBorderAttrs(attrs?.module?.decoration?.itemBorder);
	const itemBorderStyles = createBorderStyles(
		selectors.button,
		itemBorder
	);
	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: [
						...itemTypographyStyles,
						...labelTypographyStyles,
						...applyTypographyStyles,
						...itemPaddingStyles,
						...applySpacingStyles,
						...itemBorderStyles,
						...applyBorderStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'gap',
								selector: selectors.listWrapper,
								attr: attrs?.module?.decoration?.itemsSpaceBetween,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: selectors.listWrapper,
								attr: attrs?.module?.decoration?.itemsAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'min-width',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.itemMinWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.itemNormalColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.button,
								attr: attrs?.module?.decoration?.itemNormalBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.checkedButton,
								attr: attrs?.module?.decoration?.itemCheckedColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.checkedButton,
								attr: attrs?.module?.decoration?.itemCheckedBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.checkedButton,
								attr: attrs?.module?.decoration?.itemCheckedBorderColor,
							},
						},
						{
							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,
							},
						},
						{
							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?.applyButtonAlignment,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
}

export {
	ModuleStyles,
};
