type RawJsonSectionProps = {
  isAllRecordsSelected: boolean;
  hasSelectedRecord: boolean;
  recordJsonDraft: string;
  jsonText: string;
  onRawJsonEditorChange: (nextText: string) => void;
};

export default function RawJsonSection(props: RawJsonSectionProps) {
  const {
    isAllRecordsSelected,
    hasSelectedRecord,
    recordJsonDraft,
    jsonText,
    onRawJsonEditorChange,
  } = props;

  return (
    <>
      <h2 className="raw-heading">Raw JSON</h2>
      <textarea
        value={!isAllRecordsSelected && hasSelectedRecord ? recordJsonDraft : jsonText}
        onChange={(event) => onRawJsonEditorChange(event.target.value)}
        spellCheck={false}
        aria-label="JSON editor"
        className="json-editor"
      />
    </>
  );
}