import ItemQuestAdvancedPanels from "./ItemQuestAdvancedPanels";
import NpcDialogueEditorPanel from "./NpcDialogueEditorPanel";
import RawJsonSection from "./RawJsonSection";
import RecordEditorBasePanel from "./RecordEditorBasePanel";
import RecordListPanel from "./RecordListPanel";
import type { FullContentContext } from "./editorContexts";

type ContentSectionProps = {
  ctx: FullContentContext;
};

export default function ContentSection({ ctx }: ContentSectionProps) {
  const {
    activeType,
    records,
    selectedIndex,
    isAllRecordsSelected,
    hasPendingRecordChanges,
    getRecordLabel,
    buildSpritePreviewDataUrl,
    normalizeHexColor,
    selectRecordIndex,
    commitPendingRecordChanges,
    revertPendingRecordChanges,
    recordDraftError,
    isLoading,
    isSaving,
    selectedRecord,
    recordJsonDraft,
    jsonText,
    handleRawJsonEditorChange,
  } = ctx;

  return (
    <>
      <div className="structured-layout">
        <RecordListPanel
          activeType={activeType}
          records={records}
          selectedIndex={selectedIndex}
          isAllRecordsSelected={isAllRecordsSelected}
          hasPendingRecordChanges={hasPendingRecordChanges}
          getRecordLabel={getRecordLabel}
          buildSpritePreviewDataUrl={buildSpritePreviewDataUrl}
          normalizeHexColor={normalizeHexColor}
          onSelectRecordIndex={selectRecordIndex}
          onCommitPendingRecordChanges={commitPendingRecordChanges}
          onRevertPendingRecordChanges={revertPendingRecordChanges}
          recordDraftError={recordDraftError}
          isLoading={isLoading}
          isSaving={isSaving}
        />

        <section className="record-editor-panel">
          <RecordEditorBasePanel ctx={ctx} />
          <ItemQuestAdvancedPanels ctx={ctx} />
          <NpcDialogueEditorPanel ctx={ctx} />
        </section>
      </div>

      <RawJsonSection
        isAllRecordsSelected={isAllRecordsSelected}
        hasSelectedRecord={Boolean(selectedRecord)}
        recordJsonDraft={recordJsonDraft}
        jsonText={jsonText}
        onRawJsonEditorChange={handleRawJsonEditorChange}
      />
    </>
  );
}
