import { createInstance, LoadingIndicatorProps, Piral, SetComponent } from "piral-core";
import React from "react";
import { configForServerRendering } from "piral-ssr-utils";

export function createAppInstance(){
	return createInstance(
		configForServerRendering({
			requestPilets(){
				return fetch("https://feed.piral.cloud/api/v1/pilet/empty")
				.then((res) => res.json())
				.then((res) => {
					console.log(res);
					return res.items;
				});
			},
			plugins: [],
		}),
	);
}

const Loader: React.FC<LoadingIndicatorProps> = () => (
	<div className="app-center">
		<div className="spinner circles">Loading ...</div>
	</div>
);

const DashboardContainer: React.FC = ({ children }) => <div className="tiles">{children}</div>;

const Layout: React.FC = ({ children }) => (
	<div className="app-container">
		<div className="app-header">
			<h1>Cross Framework Sample</h1>
		</div>
		<div className="app-content">{children}</div>
		<div className="app-footer">
			For more information or the source code check out our{" "}
			<a href="https://github.com/smapiot/piral">GitHub repository</a>.
		</div>
	</div>
);


const PiralInstance = ({ children }: { children?: React.ReactChildren }) => {
	const instance = createAppInstance();

	return <Piral instance={instance}>
		<SetComponent name="LoadingIndicator" component={Loader}/>
		<SetComponent name="Layout" component={Layout}/>
		{children}
	</Piral>;
};


export default PiralInstance;