import { r as reactExports, e as gql, bc as useQuery, j as jsxRuntimeExports, s, h as m, k as c, l as i, d as c$1, c as a, bd as p, be as n, u } from "./index-Cr4zbAtA.js";
import { M as Metadata } from "./Metadata-aK5zM6ek.js";
import { M as MailPreview } from "./MailRenderer-B9VAq1Wr.js";
import "./ExclamationTriangleIcon-DBJKiWFf.js";
import "./CodeBracketIcon-BsDjbreq.js";
import "./ArrowsRightLeftIcon-BIf68FuZ.js";
function VariableIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M4.745 3A23.933 23.933 0 0 0 3 12c0 3.183.62 6.22 1.745 9M19.5 3c.967 2.78 1.5 5.817 1.5 9s-.533 6.22-1.5 9M8.25 8.885l1.444-.89a.75.75 0 0 1 1.105.402l2.402 7.206a.75.75 0 0 0 1.104.401l1.445-.889m-8.25.75.213.09a1.687 1.687 0 0 0 2.062-.617l4.45-6.676a1.688 1.688 0 0 1 2.062-.618l.213.09"
  }));
}
const ForwardRef = reactExports.forwardRef(VariableIcon);
const RENDERERS_QUERY = gql`
  query GetMailRenderers @live {
    mailRenderers {
      id
      key
      isDefault
    }
  }
`;
const TEMPLATES_QUERY = gql`
  query GetMailTemplates @live {
    mailTemplates {
      id
      name
      components {
        id
        name
        propsTemplate
      }
    }
  }
`;
const RENDERED_TEMPLATE_QUERY = gql`
  query GetMailRenderedTemplate(
    $templateId: ID!
    $componentId: ID!
    $rendererId: ID!
    $props: String!
  ) @live {
    mailRenderedTemplate(
      templateId: $templateId
      componentId: $componentId
      rendererId: $rendererId
      props: $props
    ) {
      id
      props
      html
      text
    }
  }
`;
const MailerTemplatePreviewPage = () => {
  var _a, _b, _c, _d, _e, _f;
  const [selectedRendererId, setSelectedRendererId] = reactExports.useState(null);
  const [selectedTemplateId, setSelectedTemplateId] = reactExports.useState(null);
  const [selectedTemplateComponentId, setSelectedTemplateComponentId] = reactExports.useState(null);
  const [propsTextValues, setPropsTextValues] = reactExports.useState({});
  const mailRenderersQuery = useQuery(RENDERERS_QUERY);
  const mailTemplatesQuery = useQuery(TEMPLATES_QUERY);
  const mailRenderedTemplateQuery = useQuery(RENDERED_TEMPLATE_QUERY, {
    variables: {
      templateId: selectedTemplateId,
      componentId: selectedTemplateComponentId,
      rendererId: selectedRendererId,
      props: propsTextValues[selectedTemplateComponentId] ?? "{}"
    },
    skip: selectedTemplateId === null || selectedTemplateComponentId === null || selectedRendererId === null
  });
  const selectedTemplate = (_a = mailTemplatesQuery.data) == null ? void 0 : _a.mailTemplates.find((template) => template.id === selectedTemplateId);
  const selectedTemplateComponent = selectedTemplate == null ? void 0 : selectedTemplate.components.find((component) => component.id === selectedTemplateComponentId);
  reactExports.useEffect(() => {
    var _a2;
    if (mailRenderersQuery.data) {
      const selectedRenderer = mailRenderersQuery.data.mailRenderers.find((renderer) => renderer.id === selectedRendererId);
      if (selectedRenderer === void 0) {
        setSelectedRendererId(null);
      }
      if (selectedRendererId === null) {
        const defaultRenderer = mailRenderersQuery.data.mailRenderers.find((renderer) => renderer.isDefault);
        if (defaultRenderer) {
          setSelectedRendererId(defaultRenderer.id);
        }
      }
    }
    if (selectedTemplate === void 0) {
      setSelectedTemplateId(null);
    }
    if (((_a2 = mailTemplatesQuery.data) == null ? void 0 : _a2.mailTemplates.length) === 1) {
      setSelectedTemplateId(mailTemplatesQuery.data.mailTemplates[0].id);
    }
    if (selectedTemplateId === null) {
      setSelectedTemplateComponentId(null);
    }
    if (selectedTemplateComponent === void 0) {
      setSelectedTemplateComponentId(null);
    }
    if ((selectedTemplate == null ? void 0 : selectedTemplate.components.length) === 1) {
      setSelectedTemplateComponentId(selectedTemplate == null ? void 0 : selectedTemplate.components[0].id);
    }
    if (propsTextValues[selectedTemplateComponentId] === void 0) {
      setPropsTextValues({
        ...propsTextValues,
        [selectedTemplateComponentId]: "{}"
      });
    }
  }, [mailRenderersQuery.data, mailTemplatesQuery.data, selectedTemplateId, selectedTemplateComponentId, selectedRendererId, selectedTemplate, selectedTemplateComponent, propsTextValues]);
  const renderers = ((_b = mailRenderersQuery.data) == null ? void 0 : _b.mailRenderers) ?? [];
  const templates = ((_c = mailTemplatesQuery.data) == null ? void 0 : _c.mailTemplates) ?? [];
  const templateComponents = (selectedTemplate == null ? void 0 : selectedTemplate.components) ?? [];
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Metadata, { title: "MailerTemplatePreview", description: "MailerTemplatePreview page" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: "Mail Template Preview" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Studio can help you work with your mail templates by providing a live preview." }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(c, { numItemsLg: 6, className: "mt-6 gap-6", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(i, { numColSpanLg: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(c$1, { className: "w-full", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "row", justifyContent: "evenly", alignItems: "center", className: "space-x-6", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "col", alignItems: "start", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Template" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(p, { value: selectedTemplateId, onValueChange: (v) => setSelectedTemplateId(v), disabled: templates.length === 0 || mailTemplatesQuery.loading, children: templates.length === 0 ? mailTemplatesQuery.loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "-1", children: "Loading..." }, "-1") : /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "-1", children: "No templates found" }, "-1") : templates.map((template) => /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: template.id, children: template.name }, template.id)) })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "col", alignItems: "start", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Component" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(p, { value: selectedTemplateComponentId, onValueChange: (v) => setSelectedTemplateComponentId(v), disabled: templateComponents.length === 0 || mailTemplatesQuery.loading, children: templateComponents.length === 0 ? mailTemplatesQuery.loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "-1", children: "Loading..." }, "-1") : /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "-1", children: "No components for this template" }, "-1") : templateComponents.map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: component.id, children: component.name }, component.id)) })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { flexDirection: "col", alignItems: "start", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Renderer" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(p, { value: selectedRendererId, onValueChange: (v) => setSelectedRendererId(v), children: renderers.length === 0 ? mailRenderersQuery.loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "-1", children: "Loading..." }, "-1") : /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: "-1", children: "No renderers found" }, "-1") : renderers.map((renderer) => /* @__PURE__ */ jsxRuntimeExports.jsx(n, { value: renderer.id, children: renderer.key }, renderer.id)) })
          ] })
        ] }),
        // TODO: Animate this in and out
        selectedTemplateComponent !== void 0 && selectedTemplateComponent.propsTemplate !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { className: "pt-6", flexDirection: "col", alignItems: "start", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Props" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("textarea", { id: "mailPreviewPropsInputTextarea", placeholder: selectedTemplateComponent.propsTemplate, rows: 3, className: "w-full resize-y border text-gray-500 dark:bg-gray-800 dark:text-gray-600", onChange: (e) => {
            setPropsTextValues({
              ...propsTextValues,
              [selectedTemplateComponentId]: e.target.value
            });
          } })
        ] })
      ] }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(i, { numColSpanLg: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MailPreview, { html: (_d = mailRenderedTemplateQuery.data) == null ? void 0 : _d.mailRenderedTemplate.html, text: (_e = mailRenderedTemplateQuery.data) == null ? void 0 : _e.mailRenderedTemplate.text, error: mailRenderedTemplateQuery.error, additionalTabHeaders: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(u, { icon: ForwardRef, children: "Props Input" }) }), additionalTabPanels: [/* @__PURE__ */ jsxRuntimeExports.jsx(a, { className: "mt-2 gap-y-4", flexDirection: "col", justifyContent: "start", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-gray-500 dark:text-gray-600", children: JSON.stringify((_f = mailRenderedTemplateQuery.data) == null ? void 0 : _f.mailRenderedTemplate.props, void 0, 2) }) }) }, "_propsInputPanelTab")] }) })
    ] })
  ] });
};
export {
  MailerTemplatePreviewPage as default
};
