import { Component, createSignal } from 'solid-js';
import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWidgetAction } from 'matrix-widget-api';
import { HopeProvider } from "@hope-ui/solid";

import { BusinessDataProvider } from './businessData';
import { AppContextProvider } from './appContext';

import { PassagesDisplay } from './passagesDisplay';
import { StopsSearchMenu } from './stopsSearchMenu/stopsSearchMenu';

import "./App.scss";
import { onCleanup, onMount } from 'solid-js';


function parseFragment() {
	const fragmentString = (window.location.hash || "?");
	return new URLSearchParams(fragmentString.substring(Math.max(fragmentString.indexOf('?'), 0)));
}

const App: Component = () => {

	console.log('App: New');

	const qs = parseFragment();
	const widgetId = qs.get('widgetId');
	const userId = qs.get('userId');

	console.log("App: widgetId:" + widgetId);
	console.log("App: userId:" + userId);

	const api = new WidgetApi(widgetId != null ? widgetId : undefined);
	api.requestCapability(MatrixCapabilities.AlwaysOnScreen);
	api.start();
	api.on("ready", function() {
		console.log("App: widget API is READY !!!!");
	});

	// Seems to don´t be used...
	api.on(`action:${WidgetApiToWidgetAction.UpdateVisibility}`, (ev: CustomEvent<IVisibilityActionRequest>) => {
		console.log("App: Visibility change");
		ev.preventDefault(); // we're handling it, so stop the widget API from doing something.
		console.log("App: ", ev.detail); // custom handling here
		/* api.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); */
		api.transport.reply(ev.detail, {});
	});

	createSignal({
		height: window.innerHeight,
		width: window.innerWidth
	});

	const onResize = () => {
		const body = document.body;

		if (window.innerWidth * 9 / 16 < window.innerHeight) {
			body.style['height'] = 'auto';
			body.style['width'] = '100vw';
		}
		else {
			body.style['height'] = '100vh';
			body.style['width'] = 'auto';
		}
	};

	onMount(() => {
		window.addEventListener('resize', onResize);
		onResize();
	});

	onCleanup(() => {
		window.removeEventListener('resize', onResize);
	})

	return (
		<BusinessDataProvider>
			<AppContextProvider>
				<HopeProvider>
					<div class="App">
						<div class="panel">
							<StopsSearchMenu />
						</div>
						<div class="panel">
							<PassagesDisplay />
						</div>
					</div>
				</HopeProvider>
			</AppContextProvider>
		</BusinessDataProvider>
	);
};

export default App;