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

// Divi Dependencies.
import {
	ModuleContainer,
	ElementComponents,
} from '@divi/module';

// Local Dependencies.
import { ActiveTagsEditProps } from './types';
import { ModuleStyles } from './styles';
import { convertAttributes } from '../../utils';
import { ModuleScriptData } from './module-script-data';
import { moduleClassnames } from './module-classnames';

declare global {
	interface Window {
		JetEngineDiviViews: any;
	}
}

/**
 * Static Module edit component of visual builder.
 *
 * @since ??
 *
 * @param {ActiveTagsEditProps} props React component props.
 *
 * @returns {ReactElement}
 */
const ActiveTagsEdit = (props: ActiveTagsEditProps): ReactElement => {
	const {
		attrs,
		id,
		name,
		elements,
	} = props;
	const preparedAttrs = convertAttributes( attrs as Record<string, any> );
	const tagsLabel = preparedAttrs.tags_label || 'Active tags:';
	const clearItemEnabled = [ true, 'on', 'yes', 'true', '1', 1 ].includes( preparedAttrs.clear_item );
	const clearItemLabel = preparedAttrs.clear_item_label || 'Clear';
	const fallback = (
		<div className="jet-smart-filters-active-tags jet-active-tags jet-filter">
			<div className="jet-active-tags__title">{tagsLabel}</div>
			<div className="jet-active-tags__list">
				<div className="jet-active-tag">
					<span className="jet-active-tag__label">Category:</span>
					<span className="jet-active-tag__val">Example</span>
					<span className="jet-active-tag__remove">×</span>
				</div>
				<div className="jet-active-tag">
					<span className="jet-active-tag__label">Price:</span>
					<span className="jet-active-tag__val">$10–$50</span>
					<span className="jet-active-tag__remove">×</span>
				</div>
				{ clearItemEnabled && (
					<div className="jet-active-tag jet-active-tag--clear">
						<span className="jet-active-tag__val">{clearItemLabel}</span>
					</div>
				) }
			</div>
		</div>
	);

	return (
		<ModuleContainer
			attrs={attrs}
			elements={elements}
			id={id}
			name={name}
			stylesComponent={ModuleStyles}
			classnamesFunction={moduleClassnames}
			scriptDataComponent={ModuleScriptData}
		>
			{elements.styleComponents({
				attrName: 'module',
			})}
			{
				<>
					<ElementComponents
						attrs={attrs?.module?.decoration ?? {}}
						id={id}
					/>
					{ fallback }
				</>
			}
		</ModuleContainer>
	);
}

export {
	ActiveTagsEdit,
};
