<?php
use Anowave\Ec\Helper\Constants;
?>
<p>Use this tool to convert script snippets into GDRP compliant script snippets. Can be used to quickly convert Meta Pixel Tracking script, TikTok snippet etc.</p>
<div>
	<a href="javascript:void(0)" data-convert="true">Convert script</a>
</div>
<div data-convert-guide="true" style="display:none">
	<p>This tool can be used to automatically add the required changes in your scripts so they can execute whenever specific consent is granted. The tool will change the script type from text/javascript to text/template, it will also add the data-consent attribute which is required from the frontend GDRP widget.</p>
	<div style="margin:10px 0px 10px 0px"><?php echo __('Select consent segment') ?></div>
	<select class="select admin__control-select" data-consent>
		<?php foreach($block->getSegments() as $segment): ?>
			<option value="<?php echo $segment ?>"><?php echo $segment ?></option>
		<?php endforeach ?>
	</select>
	<div style="margin:10px 0px 10px 0px"><?php echo __('Insert (paste) script in the textarea field below') ?></div>
	<textarea data-script data-script-not-compliant></textarea>
	<textarea data-script data-script-compliant readonly style="background:#ffffe3"></textarea>
</div>
<script>

	require(['jquery','Magento_Ui/js/modal/modal'],function($,modal)
	{
		$('a[data-convert]').on('click', function()
		{
			var content = $('[data-convert-guide]').html();

			$('<div />').html(content).modal(
			{
	            title: 'Convert script to GDRP compliance',
	            autoOpen: true,
				opened: function()
				{
					document.querySelectorAll('.modal-content textarea[data-script-not-compliant]').forEach(textarea => 
					{
						textarea.addEventListener('keyup', event => 
						{
							const script = document.createRange().createContextualFragment(event.currentTarget.value);

							const temp = document.createElement('div');

							const segment = document.querySelector('.modal-content select[data-consent]'), consent = segment.options[segment.selectedIndex].value;

							segment.addEventListener('change', event => 
							{
								textarea.dispatchEvent(new KeyboardEvent('keyup',{'key':'PageDown'}));
							});

							temp.appendChild(script.cloneNode(true));

							temp.querySelectorAll('script').forEach(element => 
							{
								element.setAttribute('type', <?php echo json_encode(Constants::SCRIPT_TYPE) ?>);
								element.dataset.consent = consent;
							});

							document.querySelectorAll('.modal-content textarea[data-script-compliant]').forEach(container => 
							{
								container.value = temp.innerHTML;
							});
							
							
						});
					});
				},
	            closed: function () 
				{
					document.querySelector('.modals-wrapper').remove();
				},
	            buttons: 
		        [
			        {
		                text: 'Done',
		                attr: 
			            {
		                    'data-action': 'confirm'
		                },
		                'class': 'action-primary'
		            }
		         ]
	         });

			return false;
		});
	});
</script>