// import { useQuery } from "@apollo/client/react";
// import queryString from "query-string";
// import React, { useState } from "react";
// import { useLocation } from "react-router-dom";
// import { QUERY_TEMPLATE_BY_PK } from "../../graphql/templates.queries";
// import AlertComponent from "../alert/alert.component";
// import LoadingSpinner from "../loading-spinner/loading-spinner.component";
// import ShopTemplateEditorComponent from "./shop-template-editor.component";

// export default function ShopTemplateEditorContainer() {
//   const search = queryString.parse(useLocation().search);
//   const editorState = useState({ html: "", gql: "" });

//   const { loading, error, data } = useQuery(QUERY_TEMPLATE_BY_PK, {
//     variables: {
//       templateId: search.customTemplateId,
//     },
//     skip: !!!search.customTemplateId,
//   });

//   if (!!!search.customTemplateId) return <span>No selection.</span>;
//   if (error) return <AlertComponent message={error.message} type="error" />;

//   return (
//     <div>
//       {loading ? (
//         <LoadingSpinner />
//       ) : (
//         <ShopTemplateEditorComponent
//           templateId={search.customTemplateId}
//           json={
//             data && data.templates_by_pk && data.templates_by_pk.jsontemplate
//           }
//           gql={data && data.templates_by_pk ? data.templates_by_pk.query : ""}
//           editorState={editorState}
//         />
//       )}
//       {data && data.templates_by_pk ? data.templates_by_pk.name : ""}
//     </div>
//   );
// }
