import { Editor } from "@tinymce/tinymce-react";
import axios from "axios";
import React, { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { EmailSettings } from "../../emails/constants";
import {
  endLoading,
  startLoading,
} from "../../redux/application/application.actions";
import { setEmailOptions } from "../../redux/email/email.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
  load: () => dispatch(startLoading()),
  endload: () => dispatch(endLoading()),
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function Test({ setEmailOptions, load, endload, bodyshop }) {
  const [state, setState] = useState(temp);

  const handleEditorChange = (content, editor) => {
    setState(content);
  };

  return (
    <div>
      <button
        onClick={() => {
          axios
            .post("/render", {
              view: state,
              context: {
                people: ["Yehuda Katz", "Alan Johnson", "Charles Jolley"],
              },
            })
            .then((r) => {
              var newWin = window.open(
                "url",
                "windowName",
                "height=300,width=300"
              );
              newWin.document.write(r.data);
            });
        }}
      >
        TinyMCE
      </button>
      <Editor
        value={state}
        apiKey="f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk"
        init={{
          height: 500,
          //menubar: false,
          encoding: "raw",
          extended_valid_elements: "span",

          plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste code help wordcount",
          ],
          toolbar:
            "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
        }}
        onEditorChange={handleEditorChange}
      />

      <button
        onClick={() =>
          setEmailOptions({
            messageOptions: {
              from: {
                name: bodyshop.shopname || EmailSettings.fromNameDefault,
                address: EmailSettings.fromAddress,
              },
              to: "patrickwf@gmail.com",
              replyTo: bodyshop.email,
              Subject: "TODO FIX ME",
            },
            template: {
              name: "appointment_reminder",
              variables: { id: "2b42336f-b8de-4f04-a053-d6bff034d384" },
            },
          })
        }
      >
        Set email config.
      </button>
      <button
        onClick={() =>
          setEmailOptions({
            messageOptions: {
              from: {
                name: bodyshop.shopname || EmailSettings.fromNameDefault,
                address: EmailSettings.fromAddress,
              },
              to: "patrickwf@gmail.com",
              replyTo: bodyshop.email,
              Subject: "TODO FIX ME",
            },
            template: {
              name: "parts_order_confirmation",
              variables: { id: "6fea31e9-ea85-4c89-ac56-6f9cc84531fe" },
            },
          })
        }
      >
        Parts Order
      </button>
    </div>
  );
});

const temp = `<div style="font-family: Arial, Helvetica, sans-serif;">
<p style="text-align: center;"><span>&rarr;<span> This is a full-featured editor demo. </span>Please explore! &larr;</span></p>
<p style="text-align: center;">&nbsp;</p>
<h2 style="text-align: center;"><span>TinyMCE is the world's most customizable, and flexible, rich text editor.</span></h2>
<p style="text-align: center;"><span><strong> A featherweight download, TinyMCE can handle any challenge you throw at it. </strong></span></p>
<p style="text-align: center;">&nbsp;</p>
<p>&nbsp;</p>
<table style="border-collapse: collapse; width: 85%; height: 86px; border-color: initial; border-style: solid; margin-left: auto; margin-right: auto;">
<tbody>
<tr style="height: 22px;">
<td style="width: 25%; text-align: center; padding: 7px; height: 22px;"><span>🛠 50+ Plugins</span></td>
<td style="width: 25%; text-align: center; padding: 7px; height: 22px;"><span>💡 Premium Support</span></td>
<td style="width: 25%; text-align: center; padding: 7px; height: 22px;"><span>🖍 Custom Skins</span></td>
<td style="width: 25%; text-align: center; padding: 7px; height: 22px;"><span>⚙ Full API Access</span></td>
</tr>
<tr style="height: 21px; display: none;">
<td style="height: 21px; display: none;"><span>{{#each people}}</span></td>
</tr>
<tr style="height: 22px;">
<td style="width: 25%; text-align: center; padding: 7px; height: 22px; border-style: solid; border-width: 1px;"><span>{{this}}</span></td>
<td style="width: 25%; text-align: center; padding: 7px; height: 22px; border-style: solid; border-width: 1px;"><span>{{this}}</span></td>
<td style="width: 25%; text-align: center; padding: 7px; height: 22px; border-style: solid; border-width: 1px;"><span>{{this}}</span></td>
<td style="width: 25%; text-align: center; padding: 7px; height: 22px; border-style: solid; border-width: 1px;"><span>{{this}}</span></td>
</tr>
<tr style="height: 21px; display: none;">
<td style="height: 21px;"><span>{{/each}}</span></td>
</tr>
</tbody>
</table>
</div>`;