// // import "codemirror-graphql/hint";
// // import "codemirror-graphql/lint";
// // import "codemirror-graphql/mode";
// // import "codemirror/addon/hint/show-hint";
// // import "codemirror/addon/lint/lint";
// // import "codemirror/lib/codemirror.css";
// // import "codemirror/theme/material.css";
// import React, { useEffect, useRef, useState } from "react";
// import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
// import ShopTemplateTestRender from "../shop-template-test-render/shop-template-test-render.component";

// export default function ShopTemplateEditorComponent({
//   templateId,
//   html,
//   gql,
//   json,
//   editorState,
// }) {
//   const [editorContent, seteditorContent] = editorState;
//   const [editorLoaded, setEditorLoaded] = useState(false);
//   const emailEditorRef = useRef(null);

//   useEffect(() => {
//     if (json && Object.keys(json).length > 0 && editorLoaded) {
//       console.log(emailEditorRef.current, !!emailEditorRef.current.loadDesign);
//       emailEditorRef.current.loadDesign(json);
//     }
//   }, [json, emailEditorRef, editorLoaded]);

//   useEffect(() => {
//     seteditorContent((prevstate) => {
//       return { ...prevstate, gql: gql };
//     });
//   }, [gql, seteditorContent]);

//   return (
//     <div>
//       {
//         //   <EmailEditor
//         //   style={{ width: "100%" }}
//         //   ref={emailEditorRef}
//         //   minHeight="700px"
//         //   onLoad={() => setEditorLoaded(true)}
//         //   options={{
//         //     // customCSS: [
//         //     //   window.location.protocol +
//         //     //     "//" +
//         //     //     window.location.host +
//         //     //     "/render-styles.css",
//         //     // ],
//         //     customJS: [
//         //       window.location.protocol +
//         //         "//" +
//         //         window.location.host +
//         //         "/editor.js",
//         //     ],
//         //   }}
//         // />
//       }

//       <div style={{ display: "flex", width: "90vw", margin: "2rem" }}>
//         {
//           // <CmEditor
//           //   style={{ flex: 1 }}
//           //   value={editorContent.gql}
//           //   options={{
//           //     mode: "graphql",
//           //     lint: {
//           //       schema: GqlSchema,
//           //     },
//           //     hintOptions: {
//           //       schema: GqlSchema,
//           //     },
//           //     lineNumbers: true,
//           //   }}
//           //   onBeforeChange={(editor, data, value) => {
//           //     seteditorContent({ ...editorContent, gql: value });
//           //   }}
//           // />
//         }
//         <ShopTemplateTestRender
//           style={{ flex: 1 }}
//           query={editorContent.gql}
//           emailEditorRef={emailEditorRef}
//         />
//         <ShopTemplateEditorSaveButton
//           templateId={templateId}
//           gql={editorContent.gql}
//           emailEditorRef={emailEditorRef}
//         />
//       </div>
//     </div>
//   );
// }