import {
  Editor,
  EditorBlurEvent,
  EditorChangeEvent,
  EditorFocusEvent,
} from "@progress/kendo-react-editor";
import { generateEditorToolTypes } from "../../../helper";
import { Style } from "../../DomainProps";

type EditorViewProps = {
  widgetStyle?: Style;
  defaultContent?: string;
  defaultEditMode?: "iframe" | "div";
  contentStyle?: React.CSSProperties;
  resizable?: boolean;
  tools?: string;
  name?: string;
  onFocus?: (event: EditorFocusEvent) => void;
  onBlur?: (event: EditorBlurEvent) => void;
  onChange?: (event: EditorChangeEvent) => void;
  value?: any;
  preserveWhitespace?: boolean | "full";
};

const EditorWidgetView = ({
  widgetStyle,
  defaultContent,
  defaultEditMode,
  contentStyle,
  resizable,
  tools = "[[Bold, Italic, Underline, Strikethrough],[Subscript, Superscript],[AlignLeft, AlignCenter, AlignRight, AlignJustify],[Indent, Outdent],[OrderedList, UnorderedList],FontSize,FontName,FormatBlock,[Undo, Redo],[Link, Unlink, InsertImage, ViewHtml],[InsertTable],[AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],[DeleteRow, DeleteColumn, DeleteTable],[MergeCells, SplitCell]]",
  onFocus,
  onChange,
  onBlur,
  value,
  preserveWhitespace,
}: EditorViewProps) => {
  return (
    <Editor
      className={widgetStyle?.className || ""}
      style={widgetStyle?.inline || {}}
      tools={generateEditorToolTypes(tools)}
      contentStyle={contentStyle}
      defaultContent={defaultContent}
      defaultEditMode={defaultEditMode}
      resizable={resizable}
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      onFocus={onFocus}
      preserveWhitespace={preserveWhitespace}
    />
  );
};

export default EditorWidgetView;
