import React from "react";
import { Input } from "antd";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default function EmailOverlayComponent({
  messageOptions,
  handleConfigChange,
  handleHtmlChange
}) {
  return (
    <div>
      <Input
        defaultValue={messageOptions.to}
        onChange={handleConfigChange}
        name="to"
      />
      CC
      <Input
        defaultValue={messageOptions.cc}
        onChange={handleConfigChange}
        name="cc"
      />
      Subject
      <Input
        defaultValue={messageOptions.subject}
        onChange={handleConfigChange}
        name="subject"
      />
      <CKEditor
        editor={ClassicEditor}
        data={messageOptions.html}
        onChange={(event, editor) => {
          handleHtmlChange(editor.getData());
        }}
      />
    </div>
  );
}
