/**
 * WordPress dependencies
 */
import {
	CheckboxControl,
	ExternalLink,
	RadioControl,
	TextControl,
} from '@safe-wordpress/components';
import { createInterpolateElement } from '@safe-wordpress/element';
import { _x, sprintf } from '@safe-wordpress/i18n';

/**
 * Internal dependencies
 */
import './style.scss';
import { DEFAULT_ATTRS } from './config';

import { useAttributes } from '../hooks';
import type { FieldSettingProps } from '../types';

export const GoogleAnalyticsTrackingSetting = ( {
	name: settingName,
	disabled,
}: FieldSettingProps ): JSX.Element => {
	const [ attributes, setAttributes ] = useAttributes(
		settingName,
		DEFAULT_ATTRS
	);

	return (
		<div className="nab-google-analytics-tracking-setting">
			<CheckboxControl
				label={ createInterpolateElement(
					sprintf(
						'%1$s <link>%2$s</link>',
						_x(
							'Send tracking events to Google Analytics 4',
							'command',
							'nelio-ab-testing'
						),
						_x( 'Read more…', 'command', 'nelio-ab-testing' )
					),
					{
						link: (
							// @ts-expect-error Link text will be added later.
							<ExternalLink href="https://neliosoftware.com/testing/help/google-analytics-integration/" />
						),
					}
				) }
				checked={ attributes.enabled }
				onChange={ ( enabled ) => setAttributes( { enabled } ) }
				disabled={ disabled }
			/>
			{ attributes.enabled && (
				<div className="nab-google-analytics-tracking-setting--details">
					<RadioControl
						label={ _x(
							'Tracking Method',
							'text',
							'nelio-ab-testing'
						) }
						options={ [
							{
								label: _x(
									'Google Tag Manager (GTM)',
									'text',
									'nelio-ab-testing'
								),
								value: 'gtm',
								// @ts-expect-error description exists in RadioControl.Option
								description: _x(
									'Select this if GA4 is installed via GTM. Events will be pushed to the dataLayer.',
									'user',
									'nelio-ab-testing'
								),
							},
							{
								label: _x(
									'Google Analytics (global site tag)',
									'text',
									'nelio-ab-testing'
								),
								value: 'gtag',
								// @ts-expect-error description exists in RadioControl.Option
								description: _x(
									'Select this if GA4 is installed via the global site tag (gtag.js). Events will be sent via gtag().',
									'user',
									'nelio-ab-testing'
								),
							},
						] }
						selected={ attributes.trackingMethod }
						onChange={ ( trackingMethod ) =>
							setAttributes( {
								trackingMethod,
							} )
						}
						disabled={ disabled }
					/>
					<TextControl
						label={ _x(
							'Measurement ID',
							'text',
							'nelio-ab-testing'
						) }
						value={ attributes.measurementId }
						placeholder="G-xxxxxxxxxx"
						onChange={ ( measurementId ) =>
							setAttributes( { measurementId } )
						}
						disabled={ disabled }
					/>
					<TextControl
						className="nab-google-analytics-tracking-setting--secret"
						label={ _x( 'API Secret', 'text', 'nelio-ab-testing' ) }
						value={ attributes.apiSecret }
						onChange={ ( apiSecret ) =>
							setAttributes( { apiSecret } )
						}
						disabled={ disabled }
					/>
				</div>
			) }
			<input
				type="hidden"
				name={ settingName }
				value={ JSON.stringify( attributes ) }
			/>
		</div>
	);
};