/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

import React, { useContext, useEffect, useState } from 'react';
import { render } from 'react-dom';
import { MergeRequestState } from '../common/types';
import { MrContext } from './context';
import { Overview } from './overview';

export function main() {
	render(<Root>{mrState => <Overview {...mrState} />}</Root>, document.getElementById('app'));
}

export const Root: React.FC = ({ children }) => {
	const ctx = useContext(MrContext);
	const [mrState, setMrState] = useState<MergeRequestState>(ctx.mrState);
	console.log('mrState: ', mrState);
	useEffect(() => {
		ctx.onchange = setMrState;
		setMrState(ctx.mrState);
	}, []);
	ctx.postMessage({ command: 'ready' });
	// ctx.postMessage({ command: 'pr.debug', args: 'initialized ' + (pr ? 'with PR' : 'without PR') });
	return mrState && typeof children === 'function' ? (
		children(mrState)
	) : (
		<div className="loading-indicator">Loading...</div>
	);
};
