/**
 * WordPress dependencies
 */
import { _x, sprintf } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import type { ConversionAction, ConversionActionType } from '@nab/types';

/**
 * Internal dependencies
 */
import icon from './icon.svg';
import { Edit as edit } from './edit';
import { View as view } from './view';

import type { Attributes } from './types';

export const name = 'nab/custom-event';

export const settings: ConversionActionType< Attributes > = {
	name,
	category: 'other',
	title: _x( 'JavaScript Snippet', 'text', 'nelio-ab-testing' ),
	description: _x(
		'Triggers a conversion programmatically using a script.',
		'text',
		'nelio-ab-testing'
	),
	icon,

	attributes: {
		snippet: sprintf(
			'// %1$s\nwindow.addEventListener( "event-name", () => {\n  // %2$s\n  convert();\n} );',
			sprintf(
				/* translators: %s: Event name. */
				_x(
					'Use the appropriate "%s" or create your own snippet.',
					'user',
					'nelio-ab-testing'
				),
				'event-name'
			),
			_x(
				'Add any additional logic required.',
				'user',
				'nelio-ab-testing'
			)
		),
	},

	scope: { type: 'test-scope' },

	validate: ( { snippet = '' } ) =>
		! /\bconvert\s*()\b/.test( snippet )
			? {
					snippet: _x(
						'Call function convert() at least once',
						'user',
						'nelio-ab-testing'
					),
			  }
			: {},

	edit,
	view,
};

// ==========
// TYPESCRIPT
// ==========

declare module '@nab/conversion-actions' {
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore

	function createConversionAction(
		actionType: typeof name,
		attributes: Partial< Attributes >
	): ConversionAction< Attributes >;
}