import type { ReactNode } from 'react';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { FileViewerProvider } from './FileViewerProvider';

type FileViewerChannelState = {
  filePath: string;
  fileName: string;
  root?: string;
} | null;

const FILE_VIEWER_CHANNEL = 'file-viewer';

export const FileViewerPanelProvider = ({ panelId, children }: { panelId: string; children: ReactNode }) => {
  const [state] = usePanelChannel<FileViewerChannelState>(`${FILE_VIEWER_CHANNEL}:${panelId}`, null);

  if (!state) {
    return (
      <div className="flex h-full w-full items-center justify-center text-duck-dark/30 text-sm">
        No file selected
      </div>
    );
  }

  return (
    <FileViewerProvider filePath={state.filePath} fileName={state.fileName} root={state.root}>
      {children}
    </FileViewerProvider>
  );
};
