<%
local api = require "luci.model.cbi.passwall.api.api"
local xray_version = api.get_xray_version()
-%>

<script type="text/javascript">
	//<![CDATA[
	var xrayInfo;
	var tokenStr = '<%=token%>';
	var manuallyUpdateText = '<%:Manually update%>';
	var noUpdateText = '<%:It is the latest version%>';
	var updateSuccessText = '<%:Update successful%>';
	var clickToUpdateText = '<%:Click to update%>';
	var inProgressText = '<%:Updating...%>';
	var unexpectedErrorText = '<%:Unexpected error%>';
	var updateInProgressNotice = '<%:Updating, are you sure to close?%>';
	var downloadingText = '<%:Downloading...%>';
	var decompressioningText = '<%:Unpacking...%>';
	var movingText = '<%:Moving...%>';

	window.onload = function () {
		var xrayCheckBtn = document.getElementById('_xray-check_btn');
		var xrayDetailElm = document.getElementById('_xray-check_btn-detail');
	};

	function addPageNotice_xray() {
		window.onbeforeunload = function (e) {
			e.returnValue = updateInProgressNotice;
			return updateInProgressNotice;
		};
	}

	function removePageNotice_xray() {
		window.onbeforeunload = undefined;
	}

	function onUpdateSuccess_xray(btn) {
		alert(updateSuccessText);

		if (btn) {
			btn.value = updateSuccessText;
			btn.placeholder = updateSuccessText;
			btn.disabled = true;
		}

		window.setTimeout(function () {
			window.location.reload();
		}, 1000);
	}

	function onRequestError_xray(btn, errorMessage) {
		btn.disabled = false;
		btn.value = manuallyUpdateText;

		if (errorMessage) {
			alert(errorMessage);
		}
	}

	function onBtnClick_xray(btn) {
		if (xrayInfo === undefined) {
			checkUpdate_xray(btn);
		} else {
			doUpdate_xray(btn);
		}
	}

	function checkUpdate_xray(btn) {
		btn.disabled = true;
		btn.value = inProgressText;

		addPageNotice_xray();

		var ckeckDetailElm = document.getElementById(btn.id + '-detail');

		XHR.get('<%=api.url("xray_check")%>', {
			token: tokenStr,
			arch: ''
		}, function (x, json) {
			removePageNotice_xray();

			if (json.code) {
				xrayInfo = undefined;
				onRequestError_xray(btn, json.error);
			} else {
				if (json.has_update) {
					xrayInfo = json;
					btn.disabled = false;
					btn.value = clickToUpdateText;
					btn.placeholder = clickToUpdateText;

					if (ckeckDetailElm) {
						var urlNode = '';
						if (json.remote_version) {
							urlNode = '<em style="color:red;">' + json.remote_version + '</em>';
							if (json.html_url) {
								urlNode = '<a href="' + json.html_url + '" target="_blank">' + urlNode + '</a>';
							}
						}
						ckeckDetailElm.innerHTML = urlNode;
					}
				} else {
					btn.disabled = true;
					btn.value = noUpdateText;
				}
			}
		}, 300);
	}

	function doUpdate_xray(btn) {
		btn.disabled = true;
		btn.value = downloadingText;

		addPageNotice_xray();

		var xrayUpdateUrl = '<%=api.url("xray_update")%>';
		// Download file
		XHR.get(xrayUpdateUrl, {
			token: tokenStr,
			url: xrayInfo ? xrayInfo.data.browser_download_url : '',
			size: xrayInfo ? xrayInfo.data.size / 1024 : null
		}, function (x, json) {
			if (json.code) {
				removePageNotice_xray();
				onRequestError_xray(btn, json.error);
			} else {
				btn.value = decompressioningText;

				// Extract file
				XHR.get(xrayUpdateUrl, {
					token: tokenStr,
					task: 'extract',
					file: json.file,
					subfix: xrayInfo ? xrayInfo.type : ''
				}, function (x, json) {
					if (json.code) {
						removePageNotice_xray();
						onRequestError_xray(btn, json.error);
					} else {
						btn.value = movingText;

						// Move file to target dir
						XHR.get(xrayUpdateUrl, {
							token: tokenStr,
							task: 'move',
							file: json.file
						}, function (x, json) {
							removePageNotice_xray();
							if (json.code) {
								onRequestError_xray(btn, json.error);
							} else {
								onUpdateSuccess_xray(btn);
							}
						}, 300)
					}
				}, 300)
			}
		}, 300)
	}
//]]>
</script>

<div class="cbi-value">
	<label class="cbi-value-title">Xray
		<%:Version%>
	</label>
	<div class="cbi-value-field">
		<span>【 <%=xray_version ~="" and xray_version or translate("Null") %> 】</span>
		<input class="btn cbi-button cbi-button-apply" type="button" id="_xray-check_btn"
			onclick="onBtnClick_xray(this);" value="<%:Manually update%>" />
		<span id="_xray-check_btn-detail"></span>
	</div>
</div>