/**
 * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md.
 */

import $ from 'jquery';

const type = {
	selfHosted: 'selfhosted',
	cloud: 'cloud'
};
const storageSwitcherKey = 'code-switcher-type';
const buttonClass = 'code-switcher__button';
const buttonActiveClass = 'code-switcher__button--active';
const codeSwitcherClass = 'code-switcher';
const codeSwitcherToolbarClass = 'code-switcher__toolbar';

function switchSnippetContent( originalSnippetContent, newType ) {
	let newSnippetContent;
	const gplComment = ' // Or \'GPL\'.';
	const licenseKey = 'licenseKey: \'<YOUR_LICENSE_KEY>\',';

	if ( newType === type.cloud ) {
		newSnippetContent = originalSnippetContent
			.replace( /import {/g, 'const {' )
			.replace( /} from/g, '} =' )
			.replace( /'ckeditor5';/g, 'CKEDITOR;' )
			.replace( /'ckeditor5-premium-features'/g, 'CKEDITOR_PREMIUM_FEATURES' )
			.replace( `${ licenseKey }${ gplComment }`, licenseKey );
	} else if ( newType === type.selfHosted ) {
		newSnippetContent = originalSnippetContent
			.replace( /const {/g, 'import {' )
			.replace( /} =/g, '} from' )
			.replace( /CKEDITOR;/g, '\'ckeditor5\';' )
			.replace( /CKEDITOR_PREMIUM_FEATURES/g, '\'ckeditor5-premium-features\'' )
			.replace( licenseKey, ( match, _, wholeString ) => {
				if ( wholeString.includes( gplComment ) ) {
					return match;
				} else {
					return `${ match }${ gplComment }`;
				}
			} );
	}

	return newSnippetContent;
}

function switchSnippet( switcher, newType ) {
	const codeElement = switcher.querySelector( 'pre code' );

	codeElement.textContent = switchSnippetContent( codeElement.textContent, newType );
	window.Prism.highlightElement( codeElement );

	const switcherClasses = switcher.classList;

	switcher.classList.replace( switcherClasses[ switcherClasses.length - 1 ], newType );
}

function saveSnippetType( type ) {
	if ( type === getSnippetType() ) {
		return;
	}

	localStorage.setItem( storageSwitcherKey, type );
	window.dispatchEvent( new Event( 'storage' ) );
}

function getSnippetType() {
	return localStorage.getItem( storageSwitcherKey );
}

function createButton( label, isActive = false ) {
	const button = document.createElement( 'button' );

	button.textContent = label;
	button.classList.add( buttonClass );

	if ( isActive ) {
		button.classList.add( buttonActiveClass );
	}

	return button;
}

export function createCodeSwitcherButtons() {
	const switchers = document.querySelectorAll( `.${ codeSwitcherClass }` );

	if ( switchers.lenght === 0 ) {
		return;
	}

	const savedType = getSnippetType();

	switchers.forEach( switcher => {
		if ( savedType ) {
			switchSnippet( switcher, savedType );
		}

		const activeType = switcher.classList[ switcher.classList.length - 1 ];

		const selfHostedButton = createButton( 'Self-hosted (npm)', activeType === type.selfHosted );

		selfHostedButton.setAttribute( 'title', 'Show import snippets for npm and ZIP setups.' );

		const cloudButton = createButton( 'Cloud (CDN)', activeType === type.cloud );

		cloudButton.setAttribute( 'title', 'Show import snippets for a CDN setup.' );

		const switcherToolbar = switcher.querySelector( `.${ codeSwitcherToolbarClass }` );

		switcherToolbar.append( selfHostedButton );
		switcherToolbar.append( cloudButton );
		switcher.prepend( switcherToolbar );

		window.addEventListener( 'storage', () => {
			const savedType = getSnippetType();

			if ( savedType ) {
				switchSnippet( switcher, savedType );

				if ( savedType === type.selfHosted ) {
					selfHostedButton.classList.add( buttonActiveClass );
					cloudButton.classList.remove( buttonActiveClass );
				} else if ( savedType === type.cloud ) {
					cloudButton.classList.add( buttonActiveClass );
					selfHostedButton.classList.remove( buttonActiveClass );
				}
			}
		} );

		selfHostedButton.addEventListener( 'click', () => {
			saveSnippetType( type.selfHosted );
		} );
		cloudButton.addEventListener( 'click', () => {
			saveSnippetType( type.cloud );
		} );
	} );

	/* eslint-disable @stylistic/max-len */
	const infoCircle = $( `
		<svg class="code-switcher__info" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M6 0.75C3.10078 0.75 0.75 3.10078 0.75 6C0.75 8.89922 3.10078 11.25 6 11.25C8.89922 11.25 11.25 8.89922 11.25 6C11.25 3.10078 8.89922 0.75 6 0.75ZM6 10.3594C3.59297 10.3594 1.64063 8.40703 1.64063 6C1.64063 3.59297 3.59297 1.64063 6 1.64063C8.40703 1.64063 10.3594 3.59297 10.3594 6C10.3594 8.40703 8.40703 10.3594 6 10.3594Z" fill="white"/>
			<path d="M5.43732 3.9375C5.43732 4.08668 5.49658 4.22976 5.60207 4.33525C5.70756 4.44074 5.85063 4.5 5.99982 4.5C6.149 4.5 6.29207 4.44074 6.39756 4.33525C6.50305 4.22976 6.56232 4.08668 6.56232 3.9375C6.56232 3.78832 6.50305 3.64524 6.39756 3.53975C6.29207 3.43426 6.149 3.375 5.99982 3.375C5.85063 3.375 5.70756 3.43426 5.60207 3.53975C5.49658 3.64524 5.43732 3.78832 5.43732 3.9375ZM6.28107 5.25H5.71857C5.667 5.25 5.62482 5.29219 5.62482 5.34375V8.53125C5.62482 8.58281 5.667 8.625 5.71857 8.625H6.28107C6.33263 8.625 6.37482 8.58281 6.37482 8.53125V5.34375C6.37482 5.29219 6.33263 5.25 6.28107 5.25Z" fill="white"/>
		</svg>` );
	infoCircle.appendTo( `.${ buttonClass }` );
}
