import React, { useContext } from 'react';
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

type AppProps = {
  id: string;
  name: string;
  logo?: string;
  onlylogo?: string;
  endpoint: string;
  introUrl?: string;
  children?: React.ReactNode;
};

const AppContext = React.createContext<AppProps>({} as AppProps);

export function useApp() {
  return useContext(AppContext);
}

export default function App({ id, name, logo, onlylogo, endpoint, introUrl, children }: AppProps) {
  return <AppContext.Provider value={{ id, name, logo, onlylogo , endpoint, introUrl }}>
      <DndProvider backend={HTML5Backend}>
        { children }
      </DndProvider>
  </AppContext.Provider>;
}