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

// WordPress dependencies.
import { __ } from '@wordpress/i18n';

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

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

/**
 * Hidden Module edit component of visual builder.
 *
 * @since ??
 *
 * @param {HiddenEditProps} props React component props.
 *
 * @returns {ReactElement}
 */
const HiddenEdit = (props: HiddenEditProps): ReactElement => {
	const {
		attrs,
		id,
		name,
		elements,
	} = props;

	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}
				/>
				<div className="jet-smart-filters-hidden jet-filter" data-is-block="jet-smart-filters/hidden">
					<div className="jet-hidden-admin-info">
						<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fillRule="evenodd" clipRule="evenodd" d="M17 14C17 11.7909 18.7909 10 21 10H43C45.2091 10 47 11.7909 47 14V23.5331C47 23.6748 46.976 23.8164 46.9279 23.9581C46.8798 24.0761 46.8077 24.1942 46.7115 24.3123L35.4615 36.4248V48.4664C35.4615 48.6553 35.4135 48.8324 35.3173 48.9977C35.2452 49.1393 35.137 49.2692 34.9928 49.3873L30.3774 52.7873C30.2812 52.8581 30.1731 52.9171 30.0529 52.9643C29.9327 52.9879 29.8125 52.9998 29.6923 52.9998C29.5962 52.9998 29.5 52.9879 29.4038 52.9643L29.1875 52.8935C28.9952 52.7991 28.8389 52.6574 28.7188 52.4685C28.5986 52.2796 28.5385 52.0789 28.5385 51.8664V36.4248L17.2885 24.3123C17.1923 24.1942 17.1202 24.0761 17.0721 23.9581C17.024 23.8164 17 23.6748 17 23.5331V14ZM21 12H43C44.1046 12 45 12.8954 45 14V18.9998H19V14C19 12.8954 19.8954 12 21 12ZM19 21V23.2162L30.5385 35.6392V50.1845L33.4615 48.0312V35.6392L45 23.2162V21H19Z" fill="#0F172A" />
						</svg>
						{__('Hidden Filter', 'jet-engine-divi-views')}
					</div>
				</div>
			</>
		</ModuleContainer>
	);
};

export {
	HiddenEdit,
};
