import findTemplate from "../contracts/template/findTemplate";
import state from "../store";
import templateToHtml from "./templateToHtml";
export default async function templateTransformer(db, { id, amp, attachments, description, editor, footerId, frameId, head, headerId, name, routes, sampleData, subject, tags, text, type, } = {}) {
  var _a;
  const template = id ? await findTemplate(db, id) : {};
  if (type)
    template.type = type;
  const partial = ["component", "frame", "contract", "pdf"].includes(template.type);
  template.partial = partial;
  if (amp)
    template.amp = amp;
  if (attachments)
    template.attachments = attachments;
  if (description)
    template.description = description;
  if (editor)
    template.editor = editor;
  if (head)
    template.head = head;
  if (name)
    template.name = name;
  if (tags)
    template.tags = tags;
  if (text)
    template.text = text;
  if (subject)
    template.subject = subject;
  if (routes)
    template.routes = routes;
  if (sampleData)
    template.sampleData = sampleData;
  if (footerId)
    template.footer = db.document("templates", footerId);
  if (headerId)
    template.header = db.document("templates", headerId);
  if (frameId)
    template.frame = db.document("templates", frameId);
  if (editor)
    template.html = await templateToHtml({
      mjml: (template === null || template === void 0 ? void 0 : template.type) === "email" && {
        fonts: null,
      },
      excludeFooter: template.partial || template.type === "component",
      excludeHeader: template.partial || template.type === "component",
      data: template.sampleData,
      handlebars: template.partial ||
        (["component", "frame"].includes(template.type) &&
          (Handlebars === null || Handlebars === void 0 ? void 0 : Handlebars.compile) &&
          Handlebars),
      customParsers: template.type === "email" && {
        header: (data) => `<mj-text><h${data.level}>${data.text}</h${data.level}></mj-text>`,
        list: (data) => {
          const type = data.style === "ordered" ? "ol" : "ul";
          const items = data.items.reduce((acc, item) => acc + `<li>${item}</li>`, "");
          return `<mj-text><${type}>${items}</${type}></mj-text>`;
        },
        raw: (data) => `<mj-raw>${data.html}</mj-raw>`,
        quote: (data) => `<mj-text align="${(data === null || data === void 0 ? void 0 : data.alignment) || "left"}"><blockquote style="text-align: ${(data === null || data === void 0 ? void 0 : data.alignment) || "left"}"><p>${data.text}</p><cite>${data.caption}</cite></blockquote></mj-text>`,
        image: (data, config) => {
          var _a;
          const imageConditions = `${data.stretched ? "img-fullwidth" : ""} ${data.withBorder ? "img-border" : ""} ${data.withBackground ? "img-bg" : ""}`;
          const imgClass = config.image.imgClass || "";
          let imageSrc;
          if (data.url) {
            // simple-image was used and the image probably is not uploaded to this server
            // therefore, we use the absolute path provided in data.url
            // so, config.image.path property is useless in this case!
            imageSrc = data.url;
          }
          else if (config.image.path === "absolute") {
            imageSrc = data.file.url;
          }
          else {
            imageSrc = config.image.path.replace(/<(.+)>/, (_match, p1) => data.file[p1]);
          }
          if ((data === null || data === void 0 ? void 0 : data.stretched) && config.image.use === "figure") {
            const figCapClass = config.image.figCapClass || "";
            return `<mj-hero mode="fluid-height"  padding="100px 0px" background-url="${imageSrc}"><mj-text padding="20px" color="${((_a = config === null || config === void 0 ? void 0 : config.img) === null || _a === void 0 ? void 0 : _a.figColor) || "#ffffff"}" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900" css-class="${figCapClass}">${(data === null || data === void 0 ? void 0 : data.caption) || ""}</mj-text></mj-hero>`;
          }
          else {
            return `<mj-image css-class="${imageConditions} ${imgClass}" src="${imageSrc}" alt="${(data === null || data === void 0 ? void 0 : data.caption) || ""}" fluid-on-mobile="${(data === null || data === void 0 ? void 0 : data.stretched) ? "true" : "false"}" />`;
          }
        },
        paragraph: (data) => {
          var _a;
          return `<mj-text color="${((data === null || data === void 0 ? void 0 : data.color) && ((_a = state === null || state === void 0 ? void 0 : state.colors) === null || _a === void 0 ? void 0 : _a[data === null || data === void 0 ? void 0 : data.color])) || "#000000"}" align="${(data === null || data === void 0 ? void 0 : data.alignment) || "left"}">${(data === null || data === void 0 ? void 0 : data.text) || ""}</mj-text>`;
        },
        table: (data) => {
          const rows = data.content.map((row) => {
            return `<tr>${row.reduce((acc, cell) => acc + `<td>${cell}</td>`, "")}</tr>`;
          });
          return `<mj-table>${rows.join("")}</mj-table>`;
        },
        button: (data) => {
          var _a, _b;
          const color = (_a = state === null || state === void 0 ? void 0 : state.colors) === null || _a === void 0 ? void 0 : _a[data === null || data === void 0 ? void 0 : data.color];
          const textColorKey = (data === null || data === void 0 ? void 0 : data.fill) === "solid" ? `${data === null || data === void 0 ? void 0 : data.color}-contrast` : data.color;
          const textColor = (_b = state === null || state === void 0 ? void 0 : state.colors) === null || _b === void 0 ? void 0 : _b[textColorKey];
          return `<mj-button ${(data === null || data === void 0 ? void 0 : data.expand) ? `width="100%"` : ""} align="${(data === null || data === void 0 ? void 0 : data.align) || "left"}" background-color="${((data === null || data === void 0 ? void 0 : data.fill) === "solid" && (data === null || data === void 0 ? void 0 : data.color) && color) || "transparent"}" ${((data === null || data === void 0 ? void 0 : data.color) && textColor && `color="${textColor}"`) || ""} href="${(data === null || data === void 0 ? void 0 : data.href) || "#"}" ${(data === null || data === void 0 ? void 0 : data.shape) === "round" ? `border-radius="64px"` : ""} ${data.fill === "outline" ? `border="2px solid ${color}"` : ""}>${(data === null || data === void 0 ? void 0 : data.text) || ""}</mj-button>`;
        },
        component: (data) => {
          return `<mj-text><div class="editor-component">{{> ${data.templateId}}}</div></mj-text>`;
        },
        code: (data) => data === null || data === void 0 ? void 0 : data.html,
      },
      template,
      disableRender: true,
      url: ((_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.url) || "https://theflood.team",
    });
  return template;
}
