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

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

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

const ModuleStyles = ({
	settings,
	mode,
	state,
	noStyleTag,
	elements,
	attrs,
	orderClass,
}: StylesProps<DynamicImageAttrs>): ReactElement => {
	const selectors = {
		wrapper: `${orderClass} .jet-listing-dynamic-image`,
		figure: `${orderClass} .jet-listing-dynamic-image__figure`,
		link: `${orderClass} a`,
		image: `${orderClass} img`,
		imageClass: `${orderClass} .jet-listing-dynamic-image__img`,
		caption: `${orderClass} .jet-listing-dynamic-image__caption`,
	};

	const imageBorder = extractBorderAttrs(attrs?.module?.decoration?.imageBorder);
	const imageBorderStyles = createBorderStyles(selectors.image, imageBorder);

	const captionTypography = extractTypographyAttrs(attrs?.module?.decoration?.captionTypography);
	const captionTypographyStyles = createTypographyStyles(selectors.caption, captionTypography);

	return (
		<StyleContainer mode={mode} state={state} noStyleTag={noStyleTag}>
			{elements.style({
				attrName: 'module',
				styleProps: {
					disabledOn: {
						disabledModuleVisibility: settings?.disabledModuleVisibility,
					},
					advancedStyles: [
						...imageBorderStyles,
						...captionTypographyStyles,
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: selectors.wrapper,
								attr: attrs?.module?.decoration?.imageAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'justify-content',
								selector: selectors.figure,
								attr: attrs?.module?.decoration?.imageAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'align-items',
								selector: selectors.figure,
								attr: attrs?.module?.decoration?.imageAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.link,
								attr: attrs?.module?.decoration?.imageWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'width',
								selector: selectors.imageClass,
								attr: attrs?.module?.decoration?.imageWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'max-width',
								selector: selectors.link,
								attr: attrs?.module?.decoration?.imageMaxWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'max-width',
								selector: selectors.image,
								attr: attrs?.module?.decoration?.imageMaxWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'height',
								selector: selectors.image,
								attr: attrs?.module?.decoration?.imageHeight,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'object-fit',
								selector: selectors.image,
								attr: attrs?.module?.decoration?.imageObjectFit,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'color',
								selector: selectors.caption,
								attr: attrs?.module?.decoration?.captionColor,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'max-width',
								selector: selectors.caption,
								attr: attrs?.module?.decoration?.captionMaxWidth,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'align-self',
								selector: selectors.caption,
								attr: attrs?.module?.decoration?.captionAlignment,
							},
						},
						{
							componentName: 'divi/common',
							props: {
								property: 'text-align',
								selector: selectors.caption,
								attr: attrs?.module?.decoration?.captionTextAlignment,
							},
						},
					],
				},
			})}
		</StyleContainer>
	);
};

export {
	ModuleStyles,
};
