import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { setEmailOptions } from "../../redux/email/email.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { TemplateList } from "../../utils/TemplateConstants";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
});

function Test({ bodyshop, setEmailOptions }) {
  return (
    <div>
      <button
        onClick={() => {
          setEmailOptions({
            messageOptions: {
              to: ["patrickwf@gmail.com"],
              replyTo: bodyshop.email,
            },
            template: {
              name: TemplateList().parts_order.key,
              variables: {
                id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
              },
            },
          });
        }}
      >
        send email
      </button>
      <button
        onClick={() => {
          logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
        }}
      >
        Log an ImEX Event.
      </button>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Test);