import { h } from "@stencil/core";
import { navigation } from "@saasquatch/component-boilerplate";
function Buttons({ callbacks, states, template }) {
  return (h("div", null,
    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
    h("button", { style: { marginLeft: "10px" }, onClick: () => callbacks.setPreviewTemplate(template) }, "Preview Dashboard")));
}
export function DefaultTemplateView(props) {
  const { states, callbacks } = props;
  return (h("div", { style: { height: "50vh" } },
    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
    h(Buttons, { states: states, callbacks: callbacks, template: props.template }),
    h("h2", null, "Navigation"),
    h("div", { style: {
        display: "grid",
        gridTemplateColumns: "repeat(9, 80px)",
        gridGap: "10px",
      } },
      h("button", { onClick: () => navigation.push("/") }, "Dashboard"),
      props.leadSubmit && (h("button", { onClick: () => navigation.push("/refer") }, "Submit a Referral")),
      h("button", { onClick: () => navigation.push("/activity") }, "Activity"),
      h("button", { onClick: () => navigation.push("/editProfile") }, "Edit Profile"),
      h("button", { onClick: () => navigation.push("/login") }, "Login"),
      h("button", { onClick: () => navigation.push("/register") }, "Register"),
      h("button", { onClick: () => navigation.push("/emailVerification") }, "Email Verification"),
      h("button", { onClick: () => navigation.push("/verifyEmail") }, "Verify Email"),
      h("button", { onClick: () => navigation.push("/forgotPassword") }, "Forgot Password"),
      h("button", { onClick: () => navigation.push("/resetPassword") }, "Reset Password")),
    h("br", null),
    h("div", { innerHTML: states.previewTemplate })));
}
