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

/**
 * Internal dependencies
 */
import './style.scss';

import { useAttributes } from '../hooks';

import { DEFAULT_ATTRS } from './config';
import type { FieldSettingProps } from '../types';
import { ClipboardButton } from '@nab/components';

export const ExternalPageScriptSetting = ( {
	name: settingName,
}: FieldSettingProps ): JSX.Element => {
	const [ attributes ] = useAttributes( settingName, DEFAULT_ATTRS );
	const { bgcolor, value, minified } = attributes;

	const wrapper =
		'<script type="text/javascript" data-overlay-color="%1$s">%2$s</script>';
	return (
		<div className="nab-external-page-script">
			<TextareaControl
				value={ sprintf( wrapper, bgcolor, `\n${ value }\n` ) }
				onChange={ () => void null }
				readOnly
			/>
			<ClipboardButton
				text={ sprintf( wrapper, bgcolor, `${ minified }` ) }
			/>
		</div>
	);
};