import "./lib/beer.min.js";
import { createApp, reactive, ref, nextTick } from "./lib/vue.min.js";
import { Dfu } from "./lib/dfu.js";
import { ESPLoader, Transport, HardReset } from "./lib/esp32.js";
import { SerialConsole } from './lib/console.js';

const res = await fetch('./config.json');
const config = await res.json();
const commandReference  = {
	'set freq ': 'Set frequency {Mhz}',
	'time ': 'Set time {epoch-secs}',
	'erase': 'Erase filesystem',
	'advert': 'Send Advertisment packet',
	'reboot': 'Reboot device',
	'clock': 'Display current time',
	'password ': 'Set new password',
	'log': 'Ouput log',
	'log start': 'Start packet logging to file system',
	'log stop': 'Stop packet logging to file system',
	'log erase': 'Erase the packet logs from file system',
	'ver': 'Show device version',
	'set af ': 'Set Air-time factor',
	'set tx ': 'Set Tx power {dBm}',
	'set repeat ': 'Set repeater mode {on|off}',
	'set advert.interval ': 'Set advert rebroadcast interval {minutes}',
	'set guest.password ': 'Set guest password',
	'set name ': 'Set advertisement name',
	'set lat': 'Set the advertisement map latitude',
	'set lon': 'Set the advertisement map longitude',
};

function setup() {
	const consoleEditBox = ref();
	const consoleWindow = ref();

	const selected = reactive({
		device: null,
		firmware: null,
		wipe: false,
		port: null
	});

	const flashing = reactive({
		instance: null,
		active: false,
		percentage: 0,
		log: '',
		error: '',
		dfuComplete: false,
	});

	const serialCon = reactive({
		instance: null,
		opened: false,
		content: '',
		edit: '',
	});

	window.app = { selected, flashing, serialCon };

	const log = {
		clean() { flashing.log = '' },
		write(data) { flashing.log += data },
		writeLine(data) { flashing.log += data + '\n' }
	};

	const refresh = () => {
		location.reload();
	}

	const flasherCleanup = async () => {
		const port = selected.port;
		flashing.active = false;
		flashing.log = '';
		flashing.error = '';
		flashing.dfuComplete = false;
		flashing.percentage = 0;
		selected.firmware = null;
		selected.wipe = false;
		selected.device = null;
		if(flashing.instance instanceof ESPLoader) {
			await flashing.instance?.hr.reset();
			await flashing.instance?.transport?.disconnect();
		}
		flashing.instance = null;
	}

	const openSerialCon = async() => {
		const port = selected.port = await navigator.serial.requestPort();
		const serialConsole = serialCon.instance = new SerialConsole(port);
		serialCon.content =  'Welcome to MeshCore serial console.\n';
		serialCon.content += 'If you came here right after flashing, please restart your device.\n';
		serialCon.content += 'Click on the cursor to get all supported commands.\n\n';
		serialConsole.onOutput = (text) => {
			serialCon.content += text;
		};
		serialConsole.connect();
		serialCon.opened = true;
		await nextTick();

		consoleEditBox.value.focus();
	}

	const closeSerialCon = async() => {
		serialCon.opened = false;
		await serialCon.instance.disconnect();
	}

	const sendCommand = async(text) => {
		const consoleEl = consoleWindow.value;
		serialCon.edit = '';
		await serialCon.instance.sendCommand(text);
		setTimeout(() => consoleEl.scrollTop = consoleEl.scrollHeight, 100);
	}

	const dfuMode = async() => {
		await Dfu.forceDfuMode(await navigator.serial.requestPort({}))
		flashing.dfuComplete = true;
	}

	const flashDevice = async() => {
		const device = selected.device;
		const firmware = selected.firmware;
		const flashFile = firmware.files.find(f => f.type === 'flash');
		if(!flashFile) {
			alert('Cannot find configuration for flash file! please report this to Discord.')
			flasherCleanup();
			return;
		}
		const url = `${config.basePath}/${flashFile.name}`;
		const resp = await fetch(url);
		const port = selected.port = await navigator.serial.requestPort({});

		if(device.type === 'esp32') {
			let esploader;
			let fileData;
			let transport;

			try {
				const reader = new FileReader();
				fileData = await new Promise(async (resolve) => {
					reader.addEventListener('load', () => resolve(reader.result));
					reader.readAsBinaryString(await resp.blob());
				});
			}
			catch(e) {
				console.error(e);
				flashing.error = `Cannot read flash file: ${e}`;
				return;
			}

			const flashOptions = {
				terminal: log,
				compress: true,
				eraseAll: selected.wipe,
				flashSize: 'keep',
				flashMode: 'keep',
				flashFreq: 'keep',
				baudrate: 115200,
				romBaudrate: 115200,
				enableTracing: false,
				fileArray: [{
					data: fileData,
					address: 0
				}],
				reportProgress: async (fileIndex, written, total) => {
					flashing.percentage = (written / total) * 100;

					// we're done with this file
					if (written === total) {
						return;
					}
				},
			};

			try {
				flashing.active = true;
				transport = new Transport(port, true);
				flashOptions.transport = transport
				flashing.instance = esploader = new ESPLoader(flashOptions);
				esploader.hr = new HardReset(transport);
				await esploader.main();
				await esploader.flashId();
			}
			catch(e) {
				console.error(e);
				flashing.error = `Failed to initialize. Did you place the device into firmware download mode? Detail: ${e}`;
				esploader = null;
				return;
			}

			try {
				await esploader.writeFlash(flashOptions);
				await esploader.after();
			}
			catch(e) {
				console.error(e);
				flashing.error = `ESP32 flashing failed: ${e}`;
				await esploader.hardReset();
				await transport.disconnect();
				return;
			}
		}
		else if(device.type === 'nrf52') {
			const dfu = this.flashing.instance = new Dfu(port, selected.wipe);

			const zipFile = await resp.blob();
			flashing.active = true;

			try {
				await dfu.dfuUpdate(zipFile, async (progress) => {
					flashing.percentage = progress;
				});
			}
			catch(e) {
				console.error(e);
				flashing.error = `nRF flashing failed: ${e}`;
				return;
			}
		}
	};

	return {
		consoleEditBox, consoleWindow,
		config, selected, flashing,
		flashDevice, flasherCleanup, dfuMode,
		serialCon, openSerialCon, sendCommand, closeSerialCon,
		refresh, commandReference
	}
}

const template = `
<div class="flash-container">
	<div v-if="flashing.active">
		<header>
			<nav>
				<i>developer_board</i>
				<span class="small">{{ selected.device.name }}</span>
				<i>chevron_right</i>
				<i>{{ selected.firmware.icon }}</i>
				<span class="small">{{ selected.firmware.title }}</span>
			</nav>
		</header>
		<article v-if="flashing.error">
			<div class="row">
				<div class="max">
					<h6>Flashing failed!</h6>
					<p><span>{{ flashing.error }}</span></p>
					<p><button @click="refresh()">Retry</button></p>
				</div>
			</div>
		</article>
		<article v-else>
			<div class="row">
				<div class="max" v-if="flashing.percentage < 100">
					<h6><progress class="circle small"></progress> Flashing...</h6>
					<p>Please do not disconnect the device</p>
				</div>
				<div class="max" v-else=>
					<h6>Flashing complete!</h6>
					<p>
						<button @click="flasherCleanup()">Close</button>
					</p>
				</div>
			</div>
			<div class="autoscroller">
				<pre class="term" v-if="flashing.terminal">{{ flashing.terminal }}</pre>
			</div>
			<nav>
				<progress :value="flashing.percentage" max="100"></progress>
			</nav>
		</article>
	</div>
	<div v-else-if="selected.firmware">
		<header>
			<nav>
				<button class="circle transparent" @click="selected.firmware = null"><i>arrow_back</i></button>
				<i>developer_board</i>
				<a class="small" href="javascript:;" @click="selected.firmware = null">{{ selected.device.name }}</a>
				<i>chevron_right</i>
				<i>{{ selected.firmware.icon }}</i>
				<span class="small">{{ selected.firmware.desc }}</span>
			</nav>
			<nav class="no-margin">
				<h6 class="small max">Install options</h6>
			</nav>
		</header>
		<ul class="list border" v-if="selected.device.type === 'esp32'">
			<li>
				<label class="checkbox">
					<input type="checkbox" v-model="selected.wipe">
					<span>Erase device</span>
					<div class="tooltip right max">
						DO NOT carry out a full erase if you are simply updating your MeshCore device, otherwise it will erase your MeshCore identity for that device.
					</div>
				</label>
			</li>
		</ul>
		<button @click="dfuMode" :disabled="flashing.dfuComplete" v-if="selected.device.type === 'nrf52'">
			<i>{{ flashing.dfuComplete ? 'check' : 'code' }}</i>
			<span>{{ flashing.dfuComplete ? 'DFU mode active' : 'Enter DFU mode' }}</span>
			<div class="tooltip right max">
				Enter DFU mode - this mode enables you to flash your firmware.
				If you did not trigger the DFU mode manually, please click this button.
			</div>
		</button>
		<div class="medium-space"></div>
		<nav class="small-margin">
		<button @click="flashDevice">
			<i>bolt</i>
			<span>Flash!</span>
			<div class="tooltip right max">
				Upload the firmware into your device. Existing firwmare will get overwritten.
				<span v-if="selected.device.type === 'nrf52'">If you did not trigger DFU mode manually, use the <b>Enter DFU mode</b> before flashing</span>
			</div>
		</button>
		<div class="max"></div>
		<button data-ui="#down" class="active">
			<i>download</i>
			<span>Download</span><i>arrow_drop_down</i>
			<menu class="no-wrap" id="down" data-ui="#down">
				<li v-for="file in selected.firmware.files">
					<a data-ui="menu-selector" :href="config.basePath + '/' + file.name" download>{{ file.title }}</a>
				</li>
			</menu>
			<div class="tooltip left max">Download a copy of the firmware files for use with other flashers</div>
		</button>
		</nav>
	</div>
	<div v-else-if="selected.device">
		<header>
			<nav>
				<button class="circle transparent" @click="selected.device = null"><i>arrow_back</i></button>
				<i>developer_board</i>
				<span>{{ selected.device.name }}</span>
			</nav>
			<nav class="no-margin">
				<h6 class="small max">Choose role</h6>
			</nav>
		</header>
		<ul class="list border">
			<li v-for="firmware in selected.device.firmware" :class="firmware.class || config.role[firmware.role].class || ''">
				<button class="transparent" @click="selected.firmware = firmware">
					<i>{{ firmware.icon || config.role[firmware.role].icon }}</i>
					<span>{{ firmware.title || config.role[firmware.role].title }}</span>
					<div class="tooltip right max" v-if="firmware.tooltip || config.role[firmware.role].tooltip" v-html="firmware.tooltip || config.role[firmware.role].tooltip"></div>
				</button>
			</li>
		</ul>
	</div>
	<div v-else>
		<header>
			<nav>
				<i>bolt</i>
				<h5 class="small max">MeshCore flasher</h5>
				<button class="transparent" @click="openSerialCon()">
					<i>terminal</i>
					<span>Console</span>
					<div class="tooltip left max">Open serial console to manage Routers and Room servers via serial terminal</div>
				</button>
			</nav>
			<nav class="no-margin">
				<h6 class="small max">Choose device</h6>
			</nav>
		</header>
		<ul class="list border">
			<li v-for="device in config.device">
				<button class="transparent" @click="selected.device = device">
					<i>developer_board</i>
					<span>{{ device.name }}</span>
					<div class="tooltip right max" v-if="device.tooltip" v-html="device.tooltip"></div>
				</button>
			</li>
		</ul>
	</div>
</div>
<div v-if="serialCon.opened" class="overlay active">
	<datalist id="command-db">
		<option v-for="(desc, command) in commandReference" :value="command">{{ desc }}</option>
	</datalist>
	<header>
		<nav>
			<button class="circle transparent" @click="closeSerialCon()"><i>arrow_back</i></button>
			<h6 class="small max">Serial Console</h6>
		</nav>
	</header>
	<pre class="console" @click="consoleEditBox.focus()" ref="consoleWindow">
		<code>{{ serialCon.content }}</code>
		<div class="holder">
			<span>&gt;</span>
			<input ref="consoleEditBox" class="console-input" type="text" v-model="serialCon.edit" @keydown.enter.prevent="sendCommand(serialCon.edit)" list="command-db">
		</div>
	</pre>
</div>
`;

createApp({ setup, template }).mount('#flasher');