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

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

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

const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<MapsListingAttrs>): ReactElement => {
	const selectors = {
		map: `${orderClass} .jet-map-listing`,
		popupPin: `${orderClass} .popup-has-pin .jet-map-box:after`,
		popupPreloader: `${orderClass} .jet-map-preloader.is-active`,
		popupLoader: `${orderClass} .jet-map-preloader.is-active .jet-map-loader`,
		markerWrap: `${orderClass} .jet-map-marker-wrap`,
		markerWrapAfter: `${orderClass} .jet-map-marker-wrap:after`,
		markerWrapHover: `${orderClass} .jet-map-marker-wrap:hover`,
		markerWrapAfterHover: `${orderClass} .jet-map-marker-wrap:hover:after`,
		marker: `${orderClass} .jet-map-marker`,
		markerPath: `${orderClass} .jet-map-marker path`,
		markerNoColor: `${orderClass} .jet-map-marker:not(.keep-color, .custom-color)`,
		markerNoColorPath: `${orderClass} .jet-map-marker:not(.keep-color, .custom-color) path`,
		markerImage: `${orderClass} .jet-map-marker-image`,
		clusterText: `${orderClass} .cluster span, ${orderClass} .marker-cluster span`,
		userMarkerWrap: `${orderClass} .jet-map-user-location-marker-wrap`,
		userMarkerWrapAfter: `${orderClass} .jet-map-user-location-marker-wrap:after`,
		userMarkerWrapHover: `${orderClass} .jet-map-user-location-marker-wrap:hover`,
		userMarkerWrapAfterHover: `${orderClass} .jet-map-user-location-marker-wrap:hover:after`,
		userMarker: `${orderClass} .jet-map-user-location-marker`,
		userMarkerPath: `${orderClass} .jet-map-user-location-marker path`,
		userMarkerNoColor: `${orderClass} .jet-map-user-location-marker:not(.keep-color, .custom-color)`,
		userMarkerNoColorPath: `${orderClass} .jet-map-user-location-marker:not(.keep-color, .custom-color) path`,
		userMarkerImage: `${orderClass} .jet-map-user-location-marker-image`,
	};

	const markerTypography = extractTypographyAttrs( attrs?.module?.decoration?.markerTypography );
	const markerTypographyStyles = createTypographyStyles( selectors.markerWrap, markerTypography );

	const markerBorder = extractBorderAttrs( attrs?.module?.decoration?.markerBorder );
	const markerBorderStyles = createBorderStyles( selectors.markerWrap, markerBorder );

	const markerSpacing = extractSpasingAttrs( attrs?.module?.decoration?.markerSpacing );
	const markerSpacingStyles = createSpacingStyles( selectors.markerWrap, markerSpacing );

	const markerClusterTypography = extractTypographyAttrs( attrs?.module?.decoration?.markerClusterTypography );
	const markerClusterTypographyStyles = createTypographyStyles( selectors.clusterText, markerClusterTypography );

	const userMarkerTypography = extractTypographyAttrs( attrs?.module?.decoration?.userLocationMarkerTypography );
	const userMarkerTypographyStyles = createTypographyStyles( selectors.userMarkerWrap, userMarkerTypography );

	const userMarkerBorder = extractBorderAttrs( attrs?.module?.decoration?.userLocationMarkerBorder );
	const userMarkerBorderStyles = createBorderStyles( selectors.userMarkerWrap, userMarkerBorder );

	const userMarkerSpacing = extractSpasingAttrs( attrs?.module?.decoration?.userLocationMarkerSpacing );
	const userMarkerSpacingStyles = createSpacingStyles( selectors.userMarkerWrap, userMarkerSpacing );

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...markerTypographyStyles,
						...markerBorderStyles,
						...markerSpacingStyles,
						...markerClusterTypographyStyles,
						...userMarkerTypographyStyles,
						...userMarkerBorderStyles,
						...userMarkerSpacingStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: selectors.popupPin,
								attr: attrs?.module?.decoration?.popupPinSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: selectors.popupPin,
								attr: attrs?.module?.decoration?.popupPinSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.popupPin,
								attr: attrs?.module?.decoration?.popupPinColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.popupPreloader,
								attr: attrs?.module?.decoration?.popupPreloaderBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.popupLoader,
								attr: attrs?.module?.decoration?.popupPreloaderColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'height',
								selector: selectors.popupPreloader,
								attr: attrs?.module?.decoration?.popupPreloaderHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.markerWrap,
								attr: attrs?.module?.decoration?.markerWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.markerImage,
								attr: attrs?.module?.decoration?.markerWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: selectors.marker,
								attr: attrs?.module?.decoration?.markerIconSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.markerWrap,
								attr: attrs?.module?.decoration?.markerColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.markerWrap,
								attr: attrs?.module?.decoration?.markerBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.markerWrapAfter,
								attr: attrs?.module?.decoration?.markerBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.markerNoColor,
								attr: attrs?.module?.decoration?.markerIconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'fill',
								selector: selectors.markerNoColorPath,
								attr: attrs?.module?.decoration?.markerIconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.markerWrapHover,
								attr: attrs?.module?.decoration?.markerColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.markerWrapHover,
								attr: attrs?.module?.decoration?.markerBgColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.markerWrapAfterHover,
								attr: attrs?.module?.decoration?.markerBgColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.marker,
								attr: attrs?.module?.decoration?.markerIconColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'fill',
								selector: selectors.markerPath,
								attr: attrs?.module?.decoration?.markerIconColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: selectors.markerWrap,
								attr: attrs?.module?.decoration?.markerAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: selectors.markerWrapAfter,
								attr: attrs?.module?.decoration?.markerPinSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: selectors.markerWrapAfter,
								attr: attrs?.module?.decoration?.markerPinSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-bottom',
								selector: selectors.markerWrap,
								attr: attrs?.module?.decoration?.markerPinSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.clusterText,
								attr: attrs?.module?.decoration?.markerClusterTextColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.userMarkerWrap,
								attr: attrs?.module?.decoration?.userLocationMarkerWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.userMarkerImage,
								attr: attrs?.module?.decoration?.userLocationMarkerWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'font-size',
								selector: selectors.userMarker,
								attr: attrs?.module?.decoration?.userLocationMarkerIconSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.userMarkerWrap,
								attr: attrs?.module?.decoration?.userLocationMarkerColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.userMarkerWrap,
								attr: attrs?.module?.decoration?.userLocationMarkerBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.userMarkerWrapAfter,
								attr: attrs?.module?.decoration?.userLocationMarkerBgColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.userMarkerNoColor,
								attr: attrs?.module?.decoration?.userLocationMarkerIconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'fill',
								selector: selectors.userMarkerNoColorPath,
								attr: attrs?.module?.decoration?.userLocationMarkerIconColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.userMarkerWrapHover,
								attr: attrs?.module?.decoration?.userLocationMarkerColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'background-color',
								selector: selectors.userMarkerWrapHover,
								attr: attrs?.module?.decoration?.userLocationMarkerBgColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-color',
								selector: selectors.userMarkerWrapAfterHover,
								attr: attrs?.module?.decoration?.userLocationMarkerBgColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.userMarker,
								attr: attrs?.module?.decoration?.userLocationMarkerIconColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'fill',
								selector: selectors.userMarkerPath,
								attr: attrs?.module?.decoration?.userLocationMarkerIconColorHover,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin',
								selector: selectors.userMarkerWrapAfter,
								attr: attrs?.module?.decoration?.userLocationMarkerPinSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'border-width',
								selector: selectors.userMarkerWrapAfter,
								attr: attrs?.module?.decoration?.userLocationMarkerPinSize,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'margin-bottom',
								selector: selectors.userMarkerWrap,
								attr: attrs?.module?.decoration?.userLocationMarkerPinSize,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
}

export {
	ModuleStyles,
};
