import React from 'react';
import { Editor } from '@craftjs/core';
import { EditorShell } from './editor/EditorShell';
import { RenderNode } from './editor/RenderNode';
import { componentResolver } from './components/resolver';
import { WhpConfig } from './types';
import { EditorConfigProvider } from './state/EditorConfigContext';
import { SiteDesignProvider } from './state/SiteDesignContext';
import { CanvasTokenStyle } from './editor/CanvasTokenStyle';
import { SaveGuardProvider, useSaveGuard } from './state/SaveGuardContext';
import { NoticeProvider } from './state/NoticeContext';
import { ProjectExtrasProvider } from './state/ProjectExtrasContext';
import { CanvasOverlays } from './editor/CanvasOverlays';
import { PageProvider } from './state/PageContext';
import { SitesmithProvider, useSitesmithModal } from './state/SitesmithContext';
import { SitesmithModal } from './panels/sitesmith/SitesmithModal';

interface AppProps {
  whpConfig: WhpConfig | null;
}

const SitesmithModalMount: React.FC = () => {
  const { isOpen, target, close } = useSitesmithModal();
  if (!isOpen) return null;
  return <SitesmithModal target={target} onClose={close} />;
};

// Craft fires onNodesChange only when the serialized node tree changes (not on
// selection, hover or DOM registration), which is exactly "the canvas was edited".
export const SaveAwareEditor: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { markDirty } = useSaveGuard();
  return (
    <Editor resolver={componentResolver} enabled={true} onRender={RenderNode} onNodesChange={markDirty}>
      {children}
    </Editor>
  );
};

export const App: React.FC<AppProps> = ({ whpConfig }) => {
  return (
    <EditorConfigProvider config={whpConfig}>
      <SaveGuardProvider>
        <NoticeProvider>
        <ProjectExtrasProvider>
        <SiteDesignProvider>
          <CanvasTokenStyle />
          <SaveAwareEditor>
            <PageProvider>
              <SitesmithProvider>
                <EditorShell />
                <CanvasOverlays />
                <SitesmithModalMount />
              </SitesmithProvider>
            </PageProvider>
          </SaveAwareEditor>
        </SiteDesignProvider>
        </ProjectExtrasProvider>
        </NoticeProvider>
      </SaveGuardProvider>
    </EditorConfigProvider>
  );
};