import { CheckedState } from '@radix-ui/react-checkbox';
import { ChunkTextMode } from '../../constant';
import { ArrayContainer, parserKeyMap } from './json-parser';
import { ObjectContainer } from './object-parser';
interface FormatPreserveEditorProps {
  initialValue: {
    key: keyof typeof parserKeyMap | 'text' | 'html';
    type: string;
    value: Array<{ [key: string]: string }>;
  };
  onSave: (value: any) => void;
  className?: string;
  isSelect?: boolean;
  isDelete?: boolean;
  isChunck?: boolean;
  handleCheckboxClick?: (id: string | number, checked: boolean) => void;
  selectedChunkIds?: string[];
  textMode?: ChunkTextMode;
}
const FormatPreserveEditor = ({
  initialValue,
  onSave,
  className,
  isChunck,
  handleCheckboxClick,
  selectedChunkIds,
  textMode,
}: FormatPreserveEditorProps) => {
  console.log('initialValue', initialValue);

  const escapeNewlines = (text: string) => {
    return text.replace(/\n/g, '\\n');
  };
  const unescapeNewlines = (text: string) => {
    return text.replace(/\\n/g, '\n');
  };
  const handleCheck = (e: CheckedState, id: string | number) => {
    handleCheckboxClick?.(id, e === 'indeterminate' ? false : e);
  };

  return (
    <div className="editor-container">
      {['json', 'chunks'].includes(initialValue.key) && (
        <ArrayContainer
          className={className}
          initialValue={initialValue}
          handleCheck={handleCheck}
          selectedChunkIds={selectedChunkIds}
          onSave={onSave}
          escapeNewlines={escapeNewlines}
          unescapeNewlines={unescapeNewlines}
          textMode={textMode}
          isChunck={isChunck}
        />
      )}

      {['text', 'html'].includes(initialValue.key) && (
        <ObjectContainer
          className={className}
          initialValue={initialValue}
          handleCheck={handleCheck}
          selectedChunkIds={selectedChunkIds}
          onSave={onSave}
          escapeNewlines={escapeNewlines}
          unescapeNewlines={unescapeNewlines}
          textMode={textMode}
          isChunck={isChunck}
        />
      )}
    </div>
  );
};

export default FormatPreserveEditor;