// https://fonts.google.com/icons

function ajax(url,postData,context) {
	let request = new XMLHttpRequest();
	let method = postData ? 'POST' : 'GET';
	request.open( method, url );
	if( postData )
		request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
	request.onload = function() {
		if( request.status !== 200 ) {
			window.console && console.log( 'ajax failed: ' + request.status );
			if( request.responseText )
				document.write('<pre>'+request.responseText+'</pre>');
			return;
		}
		eval( request.responseText );
	};
	request.send(postData);
}

function upload(input,callback) {
	let file = input.files[0];
	input.value = null;
	let request = new XMLHttpRequest();
	let url = 'https://upload.uploadcare.com/base/';
	request.open( 'POST', url );
	request.onload = function() {
		if( request.status !== 200 ) {
			let err = 'ajax failed: ' + request.status;
			if( request.responseText ) {
				err += '\n' + request.responseText;
				document.write('<pre>'+request.responseText+'</pre>');
			}
			console.log(err);
			ajax( '/error_log.js', 'err='+encodeURIComponent(err) );
			return;
		}
		let response = JSON.parse(request.responseText);
		let filename = file.name;
		let url = 'https://ucarecdn.com/' + response.file + '/' + filename;
		callback(input,url,filename);
	};
	let formData = new FormData();
	formData.append( 'UPLOADCARE_PUB_KEY', 'fe3d30f3088a50941d45' );
	formData.append( 'file', file );
	request.send(formData);
}

function bbcodeCreate(div,options) {
	if( typeof(div) === 'string' ) {
		div = document.querySelector(div);
		if(!div) throw 'selector not found';
	}
	options = options || {};
	options.buttons = options.buttons || {};
	let content = options.content || '';
	let html = `\
		<div bbcode_editor>
			<div buttons=top>
				<button type=button bold title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
				<button type=button italic title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
				<button type=button underline title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button>
				<button type=button strikethrough title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
				<button type=button sub title="Subscript"><img src="/bbcode/icons/subscript.svg"></button>
				<button type=button sup title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
				<button type=button ul title="Bullet list"><img src="/bbcode/icons/format_list_bulleted.svg"></button>
				<button type=button ol title="Numbered list"><img src="/bbcode/icons/format_list_numbered.svg"></button>
				<button type=button code_block title="Code block"><img src="/bbcode/icons/code_blocks.svg"></button>
				<button type=button code_inline title="Inline code"><img src="/bbcode/icons/code.svg"></button>
				<button type=button convert_urls><input type=checkbox name=convert_urls checked> Convert URLs</button>
			</div>
			<textarea name=bbcode>${content}</textarea>
			<div preview from_bbcode></div>
			<div buttons=bottom>
				<button type=button more><input type=checkbox> BBCode menu</button>
				<input type=file>
				<button type=button upload>Upload file</button>
				<button type=button preview><input type=checkbox> Preview</button>
`	;
	for( let key of Object.keys(options.buttons) ) {
		html += `\
				<button type=button key="${key}">${key}</button>
`		;
	}
	html += `\
			</div>
		</div>
`	;
	div.innerHTML = html;

	let enabledInPreview = [];
	let convertUrls = true;

	for( let entry of Object.entries(options.buttons) ) {
		console.log(entry);
		let button = div.querySelector('button[key="'+entry[0]+'"]');
		let fn = entry[1];
		button.onclick = function(event) {
			event.convertUrls = convertUrls;
			fn(event);
		};
		enabledInPreview.push(button);
	}

	let textarea = div.querySelector('textarea');
	function fixTextarea() {
		let height = textarea.scrollHeight;
		if( height > textarea.clientHeight ) {
			textarea.style.height = (height+2) + "px";
		}
	};
	textarea.oninput = fixTextarea;
	fixTextarea();

	function checkboxButtonClick(event) {
		event.target.querySelector('input').click();
	};

	let topButtons = div.querySelector('[buttons="top"]');
	topButtons.style.display = 'none';
	let moreButton = div.querySelector('button[more]');
	moreButton.onclick = checkboxButtonClick;
	let moreCheckbox = moreButton.querySelector('input');
	moreCheckbox.onclick = function() {
		if( moreCheckbox.checked ) {
			topButtons.style.display = 'flex';
		} else {
			topButtons.style.display = 'none';
		}
		event.stopPropagation();
	};

	let divPreview = div.querySelector('div[preview]');
	function contextPreview(bbcode,html) {
		textarea.value = bbcode;
		divPreview.innerHTML = html;
	}
	let previewButton = div.querySelector('button[preview]');
	previewButton.onclick = checkboxButtonClick;
	let previewCheckbox = previewButton.querySelector('input');
	previewCheckbox.onclick = function() {
		let buttons = previewButton.parentNode.querySelectorAll('button');
		if( previewCheckbox.checked ) {
			for( let b of buttons ) {
				if( !enabledInPreview.includes(b) )
					b.disabled = true;
			}
			textarea.style.display = 'none';
			divPreview.style.display = 'block';
			topButtons.style.display = 'none';
			let postData = 'text=' + encodeURIComponent(textarea.value) + '&convert_urls=' + convertUrls;
			ajax( '/bbcode/preview.js', postData, {preview: contextPreview} );
		} else {
			for( let b of buttons ) {
					b.disabled = false;
			}
			textarea.style.display = 'initial';
			divPreview.style.display = 'none';
			if( moreCheckbox.checked )
				topButtons.style.display = 'flex';
			textarea.focus();
		}
		event.stopPropagation();
	}
	enabledInPreview.push(previewButton);

	let convertUrlsButton = div.querySelector('button[convert_urls]');
	convertUrlsButton.onclick = checkboxButtonClick;
	let convertUrlsCheckbox = convertUrlsButton.querySelector('input');
	convertUrlsCheckbox.onclick = function(event) {
		convertUrls = convertUrlsCheckbox.checked;
		event.stopPropagation();
	};

	function add(tag,openTag,closeTag) {
		let button = div.querySelector('button['+tag+']');
		button.onclick = function() {
			let start = textarea.selectionStart;
			let end = textarea.selectionEnd;
			textarea.setRangeText(closeTag,end,end);
			textarea.setRangeText(openTag,start,start);
			let len = openTag.length;
			textarea.setSelectionRange(start+len,end+len);
			fixTextarea();
			textarea.focus();
		};
	}
	add('bold','[b]','[/b]');
	add('italic','[i]','[/i]');
	add('underline','[u]','[/u]');
	add('strikethrough','[s]','[/s]');
	add('sub','[sub]','[/sub]');
	add('sup','[sup]','[/sup]');
	add('ul','[list]\n[item]','[/item]\n[/list]');
	add('ol','[list=1]\n[item]','[/item]\n[/list]');
	add('code_block','[code]','[/code]');
	add('code_inline','[code=inline]','[/code]');

	let fileInput = div.querySelector('input[type="file"]');
	div.querySelector('button[upload]').onclick = function(){ fileInput.click(); };
	function uploaded(input,url,filename) {
		textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
		textarea.focus();
	}
	fileInput.onchange = function() { upload(fileInput,uploaded); };
}