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

function bb_fixTextarea(textarea) {
	let height = textarea.scrollHeight;
	if( height > textarea.clientHeight ) {
		textarea.style.height = (height+2) + "px";
	}
}

function bb_fileButtonClick(button) {
	button.parentNode.querySelector('input[type="file"]').click();
}

function bb_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 getBbcodeDiv(node) {
	do {
		//console.log(node);
		if( node.getAttribute('bbcode') !== null )
			return node;
	} while( node = node.parentNode );
}

function bb_uploaded(input,url,filename) {
	let div = getBbcodeDiv(input);
	let textarea = div.querySelector('textarea');
	textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
	textarea.focus();
}

function bb_add(input,openTag,closeTag) {
	let div = getBbcodeDiv(input);
	let textarea = div.querySelector('textarea');
	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);
	textarea.focus();
}

function bbcodeCreate(div,options) {
	if( typeof(div) === 'string' )
		div = document.querySelector(div);
	let content = options.content || '';
	let save = options.save;
	let cancel = options.cancel;
	let html = `\
		<div bbcode>
			<textarea oninput="bb_fixTextarea(this)"></textarea>
			<div buttons>
				<button type=button onclick="bb_add(this,'[b]','[/b]')" title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
				<button type=button onclick="bb_add(this,'[i]','[/i]')" title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
				<button type=button onclick="bb_add(this,'[u]','[/u]')" title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button>
				<button type=button onclick="bb_add(this,'[s]','[/s]')" title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
				<button type=button onclick="bb_add(this,'[sub]','[/sub]')" title="Subscript"><img src="/bbcode/icons/subscript.svg"></button>
				<button type=button onclick="bb_add(this,'[sup]','[/sup]')" title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
				<input type=file onchange="bb_upload(this,bb_uploaded)">
				<button type=button onclick="bb_fileButtonClick(this)" title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
`	;
	if(save) {
		html += `\
				<button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button>
`		;
	}
	if(cancel) {
		html += `\
				<button type=button cancel title="Cancel"><img src="/bbcode/icons/cancel.svg"></button>
`		;
	}
	html += `\
			</div>
		</div>
`	;
	div.innerHTML = html;
	if(save)
		div.querySelector('button[save]').addEventListener('click',save);
	if(cancel)
		div.querySelector('button[cancel]').addEventListener('click',cancel);
}