import React from 'react';
import ScreenerCanvas from './ScreenerCanvas';
import ResultTable     from '../ResultTable';
import TelegramPreview from '../TelegramPreview';
import RunHistoryList  from '../RunHistoryList';

export default function CanvasLayout({
  meta, settings, setLocal, save, dirty,
  result, running, previewHistory, runPreview, runSave, selectPreview,
  runs, runs_loading, selectRun, selectedRun,
  compareId, setCompareId,
}) {
  const compareItem = previewHistory.find((p) => p.id === compareId);
  const compareResult = compareItem?.result ?? null;
  const activeResult = selectedRun || result;

  return (
    <div className="screener-canvas-layout">
      <section className="screener-canvas-area">
        <ScreenerCanvas
          meta={meta}
          settings={settings}
          setLocal={setLocal}
          result={activeResult}
          running={running}
          dirty={dirty}
          onRunPreview={() => runPreview(settings)}
          onRunSave={() => runSave(settings)}
          onPersistSettings={save}
        />
      </section>
      <section className="screener-canvas-results">
        <div className="screener-canvas-results-main">
          <ResultTable
            result={activeResult}
            compareWith={compareResult}
            compareLabel={compareItem ? new Date(compareItem.timestamp).toLocaleTimeString() : null}
          />
          <TelegramPreview payload={activeResult?.telegram_payload} />
        </div>
        <aside className="screener-canvas-results-side">
          <RunHistoryList
            runs={runs}
            loading={runs_loading}
            onSelect={selectRun}
            selectedId={selectedRun?.meta?.id}
            previewHistory={previewHistory}
            onSelectPreview={selectPreview}
            onSetCompare={setCompareId}
            compareId={compareId}
          />
        </aside>
      </section>
    </div>
  );
}