function flex2html(element, json) {
  let carousel = carousel_struc();
  let result = "";

  if (json["type"] === "flex") {
    json = json["contents"];
    if (json["type"] === "bubble") {
      result = bubble_object(json);
      carousel = carousel.replace("<!-- inner -->", result);
    } else if (json["type"] === "carousel") {
      json["contents"].forEach((obj, index) => {
        let result = bubble_object(obj);
        result = result.replace("<!-- content -->", "");
        result = result.replace("<!-- inner -->", "");
        carousel = carousel.replace(
          "<!-- inner -->",
          result + "<!-- inner -->"
        );
      });
    }
  }

  document.getElementById(element).innerHTML += carousel;
  return carousel;
}

function bubble_object(json) {
  let { hero, header, body, footer } = json;
  let hero_object = hero_struc(json);
  let header_object = header_struc(json);
  let body_object = body_struc(json);
  let footer_object = footer_struc(json);
  let bubble = bubble_struc(json);

  let box = "";
  for (let key in hero) {
    if (hero.hasOwnProperty(key)) {
      if (key === "type" && hero[key] === "box") {
        box = box_object(hero);
        let box_inner = box_recursive(box, hero["contents"]);
        box = box_inner;
      } else {
        box = convert_object(hero);
      }
    }
  }
  hero_object = hero_object.replace("<!-- inner -->", box);

  box = "";
  for (let key in header) {
    if (header.hasOwnProperty(key)) {
      if (key === "type" && header[key] === "box") {
        box = box_object(header);
        let box_inner = box_recursive(box, header["contents"]);
        box = box_inner;
      }
    }
  }
  header_object = header_object.replace("<!-- inner -->", box);

  box = "";
  for (let key in body) {
    if (body.hasOwnProperty(key)) {
      if (key === "type" && body[key] === "box") {
        box = box_object(body);
        let box_inner = box_recursive(box, body["contents"]);
        box = box_inner;
      }
    }
  }
  body_object = body_object.replace("<!-- inner -->", box);

  box = "";
  for (let key in footer) {
    if (footer.hasOwnProperty(key)) {
      if (key === "type" && footer[key] === "box") {
        box = box_object(footer);
        let box_inner = box_recursive(box, footer["contents"]);
        box = box_inner;
      }
    }
  }
  footer_object = footer_object.replace("<!-- inner -->", box);

  bubble = bubble.replace("<!-- hero -->", hero_object);
  bubble = bubble.replace("<!-- header -->", header_object);
  bubble = bubble.replace("<!-- body -->", body_object);
  bubble = bubble.replace("<!-- footer -->", footer_object);

  return bubble;
}
function box_recursive(parent_box, json) {
  let result = [];
  json.forEach((obj, index) => {
    let temp;
    if (obj["type"] === "box") {
      let temp2 = box_object(obj);
      temp = box_recursive(temp2, obj["contents"]);
    } else if (
      obj["type"] === "text" &&
      obj["contents"] &&
      obj["contents"].length > 0
    ) {
      let temp2 = convert_object(obj);
      temp = box_recursive(temp2, obj["contents"]);
    } else {
      temp = convert_object(obj);
    }
    result[index] = temp;
  });
  json.forEach((obj, index) => {
    result[index] = result[index].replace("<!-- content -->", "");
    parent_box = parent_box.replace(
      "<!-- content -->",
      result[index] + "<!-- content -->"
    );
  });

  return parent_box;
}

function convert_object(json) {
  switch (json["type"]) {
    case "image":
      object = image_object(json);
      break;
    case "icon":
      object = icon_object(json);
      break;
    case "text":
      object = text_object(json);
      break;
    case "span":
      object = span_object(json);
      break;
    case "button":
      object = button_object(json);
      break;
    case "filler":
      object = filler_object(json);
      break;
    case "spacer":
      object = spacer_object(json);
      break;
    case "separator":
      object = separator_object(json);
      break;
    default:
      object = null;
  }
  return object;
}

function box_object(json) {
  let style = "";
  let {
    layout,
    position,
    flex,
    spacing,
    margin,
    width,
    height,
    backgroundColor,
    borderColor,
    borderWidth,
    cornerRadius,
    justifyContent,
    alignItems,
    offsetTop,
    offsetBottom,
    offsetStart,
    offsetEnd,
    paddingAll,
    paddingTop,
    paddingBottom,
    paddingStart,
    paddingEnd,
    background,
  } = json;
  if (layout === "baseline") {
    layout1 = "hr";
    layout2 = "bl";
  } else if (layout === "horizontal") {
    layout1 = "hr";
    layout2 = "";
  } else if (layout === "vertical") {
    layout1 = "vr";
    layout2 = "";
  }
  fl = "";
  if (flex > 3) {
    style += `-webkit-box-flex:${flex};flex-grow:${flex};`;
  } else {
    fl = flex >= 0 ? `fl${flex}` : "";
  }
  exabs = position === "absolute" ? "ExAbs" : "";

  if (spacing && spacing.indexOf("px") >= 0) {
    spc = "";
  } else {
    spc = spacing ? "spc" + upperalldigit(spacing) : "";
  }

  if (margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
    style += `margin-top:${margin};`;
    exmgn = "";
  } else {
    exmgn = margin ? "ExMgnT" + upperalldigit(margin) : "";
  }
  if (width && width !== "") {
    style += `width:${width}; max-width:${width};`;
  }
  if (height && height !== "") {
    style += `height:${height};`;
  }
  if (backgroundColor) {
    style += `background-color:${backgroundColor} !important;`;
  }
  if (borderColor) {
    style += `border-color:${borderColor} !important;`;
  }

  if (
    borderWidth &&
    (borderWidth.indexOf("px") >= 0 || borderWidth.indexOf("%") >= 0)
  ) {
    style += `border-width:${borderWidth};`;
    ExBdr = "";
  } else {
    switch (borderWidth) {
      case "none":
        ExBdr = "ExBdrWdtNone";
        break;
      case "light":
        ExBdr = "ExBdrWdtLgh";
        break;
      case "normal":
        ExBdr = "ExBdrWdtNml";
        break;
      case "medium":
        ExBdr = "ExBdrWdtMdm";
        break;
      case "semi-bold":
        ExBdr = "ExBdrWdtSbd";
        break;
      case "bold":
        ExBdr = "ExBdrWdtBld";
        break;
      default:
        ExBdr = "";
      // code block
    }
  }
  if (
    cornerRadius &&
    (cornerRadius.indexOf("px") >= 0 || cornerRadius.indexOf("%") >= 0)
  ) {
    style += `border-radius:${cornerRadius};`;
    ExBdrRad = "";
  } else {
    ExBdrRad = cornerRadius ? "ExBdrRad" + upperalldigit(cornerRadius) : "";
  }

  jfc = "";
  if (justifyContent && justifyContent !== "") {
    switch (justifyContent) {
      case "center":
        jfc = "itms-jfcC";
        break;
      case "flex-start":
        jfc = "itms-jfcS";
        break;
      case "flex-end":
        jfc = "itms-jfcE";
        break;
      case "space-between":
        jfc = "itms-jfcSB";
        break;
      case "space-around":
        jfc = "itms-jfcSA";
        break;
      case "space-evenly":
        jfc = "itms-jfcSE";
        break;
      default:
        jfc = "";
      // code block
    }
  }
  alg = "";
  if (alignItems && alignItems !== "") {
    switch (alignItems) {
      case "center":
        alg = "itms-algC";
        break;
      case "flex-start":
        alg = "itms-algS";
        break;
      case "flex-end":
        alg = "itms-algE";
        break;
      default:
        alg = "";
      // code block
    }
  }
  if (
    offsetTop &&
    (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)
  ) {
    style += `top:${offsetTop};`;
    ext = "";
  } else {
    ext = offsetTop ? "ExT" + upperalldigit(offsetTop) : "";
  }

  if (
    offsetBottom &&
    (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)
  ) {
    style += `bottom:${offsetBottom};`;
    exb = "";
  } else {
    exb = offsetBottom ? "ExB" + upperalldigit(offsetBottom) : "";
  }

  if (
    offsetStart &&
    (offsetStart.indexOf("px") >= 0 || offsetStart.indexOf("%") >= 0)
  ) {
    style += `left:${offsetStart};`;
    exl = "";
  } else {
    exl = offsetStart ? "ExL" + upperalldigit(offsetStart) : "";
  }

  if (
    offsetEnd &&
    (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)
  ) {
    style += `right:${offsetEnd};`;
    exr = "";
  } else {
    exr = offsetEnd ? "ExR" + upperalldigit(offsetEnd) : "";
  }

  if (
    paddingAll &&
    (paddingAll.indexOf("px") >= 0 || paddingAll.indexOf("%") >= 0)
  ) {
    style += `padding:${paddingAll};`;
    ExPadA = "";
  } else {
    ExPadA = paddingAll ? "ExPadA" + upperalldigit(paddingAll) : "";
  }

  if (
    paddingTop &&
    (paddingTop.indexOf("px") >= 0 || paddingTop.indexOf("%") >= 0)
  ) {
    style += `padding-top:${paddingTop};`;
    ExPadT = "";
  } else {
    ExPadT = paddingTop ? "ExPadT" + upperalldigit(paddingTop) : "";
  }

  if (
    paddingBottom &&
    (paddingBottom.indexOf("px") >= 0 || paddingBottom.indexOf("%") >= 0)
  ) {
    style += `padding-bottom:${paddingBottom};`;
    ExPadB = "";
  } else {
    ExPadB = paddingBottom ? "ExPadB" + upperalldigit(paddingBottom) : "";
  }

  if (
    paddingStart &&
    (paddingStart.indexOf("px") >= 0 || paddingStart.indexOf("%") >= 0)
  ) {
    style += `padding-left:${paddingStart};`;
    ExPadL = "";
  } else {
    ExPadL = paddingStart ? "ExPadL" + upperalldigit(paddingStart) : "";
  }

  if (
    paddingEnd &&
    (paddingEnd.indexOf("px") >= 0 || paddingEnd.indexOf("%") >= 0)
  ) {
    style += `padding-right:${paddingEnd};`;
    ExPadR = "";
  } else {
    ExPadR = paddingEnd ? "ExPadR" + upperalldigit(paddingEnd) : "";
  }

  if (background && background.type === "linearGradient") {
    centerPosition = background.centerPosition
      ? background.centerPosition
      : "50%";
    if (background.centerColor) {
      style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.centerColor} ${centerPosition}, ${background.endColor} 100%);`;
    } else {
      style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.endColor} 100%);`;
    }
  }

  return `<div class="MdBx ${layout1} ${layout2} ${fl} ${exabs} ${exmgn} ${spc} ${ExBdr} ${ExBdrRad} ${jfc} ${alg} ${ext} ${exb} ${exl} ${exr} ${ExPadA} ${ExPadT} ${ExPadB} ${ExPadL} ${ExPadR}" style="${style}"><!-- content --></div>`;
}

function button_object(json) {
  style2 = "";
  style3 = "";

  let {
    flex,
    margin,
    position,
    height,
    style,
    color,
    gravity,
    adjustMode,
    offsetTop,
    offsetBottom,
    offsetStart,
    offsetEnd,
    action,
  } = json;

  fl = "";
  if (flex > 3) {
    style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`;
  } else {
    fl = flex >= 0 ? `fl${flex}` : "";
  }
  exabs = position === "absolute" ? "ExAbs" : "";

  if (margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
    style2 += `margin-top:${margin};`;
    exmgn = "";
  } else {
    exmgn = margin ? "ExMgnT" + upperalldigit(margin) : "";
  }

  height =
    !height || height === "" || height === "md"
      ? ""
      : "Ex" + upperalldigit(height);
  grv =
    gravity === "bottom" || gravity === "center"
      ? "grv" + upper1digit(gravity)
      : "";

  ExBtn = "ExBtnL";
  if (style && style !== "") {
    switch (style) {
      case "link":
        ExBtn = "ExBtnL";
        if (color) {
          style3 += `color:${color} !important;`;
        }
        break;
      case "primary":
        ExBtn = "ExBtn1";
        if (color) {
          style3 += `background-color:${color} !important;color:#ffffff !important;`;
        }
        break;
      case "secondary":
        ExBtn = "ExBtn2";
        if (color) {
          style3 += `background-color:${color} !important;`;
        }
        break;
      default:
        ExBtn = "ExBtnL";
        if (color) {
          style3 += `color:${color} !important;`;
        }
      // code block
    }
  }  

  if (
    offsetTop &&
    (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)
  ) {
    style2 += `top:${offsetTop};`;
    ext = "";
  } else {
    ext = offsetTop ? "ExT" + upperalldigit(offsetTop) : "";
  }

  if (
    offsetBottom &&
    (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)
  ) {
    style2 += `bottom:${offsetBottom};`;
    exb = "";
  } else {
    exb = offsetBottom ? "ExB" + upperalldigit(offsetBottom) : "";
  }

  if (
    offsetStart &&
    (offsetStart.indexOf("px") >= 0 || offsetStart.indexOf("%") >= 0)
  ) {
    style2 += `left:${offsetStart};`;
    exl = "";
  } else {
    exl = offsetStart ? "ExL" + upperalldigit(offsetStart) : "";
  }

  if (
    offsetEnd &&
    (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)
  ) {
    style2 += `right:${offsetEnd};`;
    exr = "";
  } else {
    exr = offsetEnd ? "ExR" + upperalldigit(offsetEnd) : "";
  }

  action = !action ? { type: "none" } : action;
  if (action.type === "uri") {
    return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`;
  } else if (action.type === "message") {
    return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`;
  } else if (action.type === "postback") {
    return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`;
  } else {
    return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`;
  }
}
function filler_object(json) {
  let style = "";
  let { flex } = json;
  fl = "";
  if (flex > 3) {
    style += `-webkit-box-flex:${flex};flex-grow:${flex};`;
  } else {
    fl = flex >= 0 ? `fl${flex}` : "";
  }
  return `<div class="mdBxFiller ${fl}" style="${style}" ></div>`;
}
function icon_object(json) {
  let style2 = "";
  let {
    size,
    aspectRatio,
    url,
    position,
    margin,
    offsetTop,
    offsetBottom,
    offsetStart,
    offsetEnd,
  } = json;
  let styleimg = `background-image:url('${url}');`;

  size = !size || size === "" ? "md" : size;
  if (size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
    style2 += `font-size:${size};`;
    size = "";
  } else {
    size = "Ex" + upperalldigit(size);
  }

  if (!aspectRatio || aspectRatio === "") {
    styleimg += `width:1em;`;
  } else {
    ratio = ratio[0] / ratio[1];
    styleimg += `width:${ratio}em;`;
  }
  exabs = position === "absolute" ? "ExAbs" : "";

  if (margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
    style2 += `margin-top:${margin};`;
    exmgn = "";
  } else {
    exmgn = margin ? "ExMgnT" + upperalldigit(margin) : "";
  }

  if (
    offsetTop &&
    (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)
  ) {
    style2 += `top:${offsetTop};`;
    ext = "";
  } else {
    ext = offsetTop ? "ExT" + upperalldigit(offsetTop) : "";
  }

  if (
    offsetBottom &&
    (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)
  ) {
    style2 += `bottom:${offsetBottom};`;
    exb = "";
  } else {
    exb = offsetBottom ? "ExB" + upperalldigit(offsetBottom) : "";
  }

  if (
    offsetStart &&
    (offsetStart.indexOf("px") >= 0 || offsetStart.indexOf("%") >= 0)
  ) {
    style2 += `left:${offsetStart};`;
    exl = "";
  } else {
    exl = offsetStart ? "ExL" + upperalldigit(offsetStart) : "";
  }

  if (
    offsetEnd &&
    (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)
  ) {
    style2 += `right:${offsetEnd};`;
    exr = "";
  } else {
    exr = offsetEnd ? "ExR" + upperalldigit(offsetEnd) : "";
  }

  return `<div class="MdIco fl0 ${size} ${exabs} ${exmgn} ${ext} ${exb} ${exl} ${exr}" style="${style2}" ><div><span style="${styleimg}"></span></div></div>`;
}
function image_object(json) {
  let style = "";
  let style2 = "";
  let {
    aspectMode,
    size,
    aspectRatio,
    url,
    position,
    flex,
    margin,
    align,
    gravity,
    backgroundColor,
    offsetTop,
    offsetBottom,
    offsetStart,
    offsetEnd,
    action,
  } = json;
  let styleimg = `background-image:url('${url}');`;
  if (backgroundColor) {
    styleimg += `background-color:${backgroundColor} !important;`;
  }

  aspectMode = !aspectMode || aspectMode === "" ? "fit" : aspectMode;
  size = !size || size === "" ? "md" : size;
  aspectMode = upperalldigit(aspectMode);
  if (size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
    style2 += `width:${size};`;
    size = "";
  } else {
    size = "Ex" + upperalldigit(size);
  }

  if (!aspectRatio || aspectRatio === "") {
    ratio = "100";
  } else {
    ratio = aspectRatio.split(":");
    ratio = (ratio[1] * 100) / ratio[0];
  }
  fl = "";
  if (flex > 3) {
    style += `-webkit-box-flex:${flex};flex-grow:${flex};`;
  } else {
    fl = flex >= 0 ? `fl${flex}` : "";
  }
  exabs = position === "absolute" ? "ExAbs" : "";

  if (margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
    style += `margin-top:${margin};`;
    exmgn = "";
  } else {
    exmgn = margin ? "ExMgnT" + upperalldigit(margin) : "";
  }

  alg = align === "start" || align === "end" ? "alg" + upper1digit(align) : "";
  grv =
    gravity === "bottom" || gravity === "center"
      ? "grv" + upper1digit(gravity)
      : "";

  if (
    offsetTop &&
    (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)
  ) {
    style += `top:${offsetTop};`;
    ext = "";
  } else {
    ext = offsetTop ? "ExT" + upperalldigit(offsetTop) : "";
  }

  if (
    offsetBottom &&
    (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)
  ) {
    style += `bottom:${offsetBottom};`;
    exb = "";
  } else {
    exb = offsetBottom ? "ExB" + upperalldigit(offsetBottom) : "";
  }

  if (
    offsetStart &&
    (offsetStart.indexOf("px") >= 0 || offsetStart.indexOf("%") >= 0)
  ) {
    style += `left:${offsetStart};`;
    exl = "";
  } else {
    exl = offsetStart ? "ExL" + upperalldigit(offsetStart) : "";
  }

  if (
    offsetEnd &&
    (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)
  ) {
    style += `right:${offsetEnd};`;
    exr = "";
  } else {
    exr = offsetEnd ? "ExR" + upperalldigit(offsetEnd) : "";
  }
  action = !action ? { type: "none" } : action;
  if (action.type === "uri") {
    return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}"  style="${style}">
                  <div style="${style2}">
                     <a href="javascript:;" style="padding-bottom:${ratio}%;">
                        <span style="${styleimg}"></span>
                     </a>
                  </div>
               </div>`;
  } else if (action.type === "message") {
    return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}"  style="${style}">
                  <div style="${style2}">
                     <a href="javascript:;" style="padding-bottom:${ratio}%;">
                        <span style="${styleimg}"></span>
                     </a>
                  </div>
               </div>`;
  } else if (action.type === "postback") {
    return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}"  style="${style}">
                  <div style="${style2}">
                     <a href="javascript:;" style="padding-bottom:${ratio}%;">
                        <span style="${styleimg}"></span>
                     </a>
                  </div>
               </div>`;
  } else {
    return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}"  style="${style}">
                  <div style="${style2}">
                     <a href="javascript:;" style="padding-bottom:${ratio}%;">
                        <span style="${styleimg}"></span>
                     </a>
                  </div>
               </div>`;
  }
}
function separator_object(json) {
  let style = "";
  let { margin, color } = json;

  if (margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
    style += `margin-top:${margin};`;
    exmgn = "";
  } else {
    exmgn = margin ? "ExMgnT" + upperalldigit(margin) : "";
  }
  if (color) {
    style += `border-color:${color} !important;`;
  }

  return `<div class="fl0 MdSep ${exmgn}" style="${style}" ></div>`;
}
function spacer_object(json) {
  let { size } = json;
  size = !size || size === "" ? "md" : size;
  if (size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
    size = "";
  } else {
    size = "spc" + upperalldigit(size);
  }
  return `<div class="mdBxSpacer ${size} fl0" ></div>`;
}
function span_object(json) {
  let style2 = "";
  let { text, size, color, weight, style, decoration } = json;

  if (size && size !== "") {
    if (size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
      style2 += `font-size:${size};`;
      size = "";
    } else {
      size = "Ex" + upperalldigit(size);
    }
  } else {
    size = "";
  }

  if (color && color !== "") {
    style2 += `color:${color};`;
  }
  ExWB = weight === "bold" ? "ExWB" : "";
  ExFntSty =
    style === "normal" ? "ExFntStyNml" : style === "italic" ? "ExFntStyIt" : "";
  ExTxtDec =
    decoration === "line-through"
      ? "ExTxtDecLt"
      : decoration === "underline"
      ? "ExTxtDecUl"
      : decoration === "none"
      ? "ExTxtDecNone"
      : "";

  return `<span class="MdSpn ${ExWB} ${size} ${ExFntSty} ${ExTxtDec}" style="${style2}" >${text}</span>`;
}
function carousel_struc() {
  return `<div class="LySlider"><div class="lyInner"><!-- inner --></div></div><br>`;
}

function bubble_struc(json) {
  let { size, direction, action } = json;
  size = !size || size === "" ? "medium" : size;
  direction = !direction || direction == "" ? "ltr" : direction;
  size = upper2digit(size);

  console.log(json);

  return `<div class="lyItem Ly${size}"><div class="T1 fx${direction.toUpperCase()}" dir="${direction}"><!-- hero --><!-- header --><!-- body --><!-- footer --></div></div>`;
}
function hero_struc(json) {
  let { styles } = json;
  let backgroundColor = "";
  if (styles) {
    let { hero } = styles;
    backgroundColor =
      hero && hero.backgroundColor
        ? `background-color:${hero.backgroundColor}`
        : "";
  }
  return `<div class="t1Hero" style="${backgroundColor}"><!-- inner --></div>`;
}
function header_struc(json) {
  let { styles } = json;
  let backgroundColor = "";
  if (styles) {
    let { header } = styles;
    backgroundColor =
      header && header.backgroundColor
        ? `background-color:${header.backgroundColor}`
        : "";
  }
  return `<div class="t1Header" style="${backgroundColor}"><!-- inner --></div>`;
}
function body_struc(json) {
  let { footer, styles } = json;
  let backgroundColor = "";
  if (styles) {
    let { body } = styles;
    backgroundColor =
      body && body.backgroundColor
        ? `background-color:${body.backgroundColor}`
        : "";
  }
  let ExHasFooter = footer ? "ExHasFooter" : "";
  return `<div class="t1Body ${ExHasFooter}" style="${backgroundColor}"><!-- inner --></div>`;
}
function footer_struc(json) {
  let { styles } = json;
  let backgroundColor = "";
  if (styles) {
    let { footer } = styles;
    backgroundColor =
      footer && footer.backgroundColor
        ? `background-color:${footer.backgroundColor}`
        : "";
  }
  return `<div class="t1Footer" style="${backgroundColor}"><!-- inner --></div>`;
}
function text_object(json) {
  let style2 = "";
  let {
    flex,
    margin,
    size,
    position,
    align,
    gravity,
    text,
    color,
    weight,
    style,
    decoration,
    wrap,
    maxLines,
    adjustMode,
    offsetTop,
    offsetBottom,
    offsetStart,
    offsetEnd,
  } = json;

  fl = "";
  if (flex > 3) {
    style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`;
  } else {
    fl = flex >= 0 ? `fl${flex}` : "";
  }
  exabs = position === "absolute" ? "ExAbs" : "";

  if (margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
    style2 += `margin-top:${margin};`;
    exmgn = "";
  } else {
    exmgn = margin ? "ExMgnT" + upperalldigit(margin) : "";
  }

  alg =
    align === "start" || align === "end" || align === "center"
      ? "ExAlg" + upper1digit(align)
      : "";
  grv =
    gravity === "bottom" || gravity === "center"
      ? "grv" + upper1digit(gravity)
      : "";
  size = !size || size === "" ? "md" : size;
  if (size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
    style2 += `font-size:${size};`;
    size = "";
  } else {
    size = "Ex" + upperalldigit(size);
  }

  if (color && color !== "") {
    style2 += `color:${color};`;
  }
  ExWB = weight === "bold" ? "ExWB" : "";
  ExFntSty =
    style === "normal" ? "ExFntStyNml" : style === "italic" ? "ExFntStyIt" : "";
  ExTxtDec =
    decoration === "line-through"
      ? "ExTxtDecLt"
      : decoration === "underline"
      ? "ExTxtDecUl"
      : decoration === "none"
      ? "ExTxtDecNone"
      : "";
  ExWrap = wrap === true ? "ExWrap" : "";
  if (
    offsetTop &&
    (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)
  ) {
    style2 += `top:${offsetTop};`;
    ext = "";
  } else {
    ext = offsetTop ? "ExT" + upperalldigit(offsetTop) : "";
  }

  if (
    offsetBottom &&
    (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)
  ) {
    style2 += `bottom:${offsetBottom};`;
    exb = "";
  } else {
    exb = offsetBottom ? "ExB" + upperalldigit(offsetBottom) : "";
  }

  if (offsetStart && offsetStart.indexOf("px") >= 0) {
    style2 += `left:${offsetStart};`;
    exl = "";
  } else {
    exl = offsetStart ? "ExL" + upperalldigit(offsetStart) : "";
  }

  if (
    offsetEnd &&
    (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)
  ) {
    style2 += `right:${offsetEnd};`;
    exr = "";
  } else {
    exr = offsetEnd ? "ExR" + upperalldigit(offsetEnd) : "";
  }
  text = !text ? "" : nl2br(text, true);
  return `<div class="MdTxt ${fl} ${exabs} ${exmgn} ${alg} ${grv} ${size} ${ExWB} ${ExFntSty} ${ExTxtDec} ${ExWrap} ${ext} ${exb} ${exl} ${exr}" style="${style2}"><p>${text}<!-- content --></p></div>`;
}
function upper1digit(str) {
  return str.charAt(0).toUpperCase();
}
function upper2digit(str) {
  return str.charAt(0).toUpperCase() + str.substring(1, 2);
}
function upperalldigit(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function nl2br(str, is_xhtml) {
  if (typeof str === "undefined" || str === null) {
    return "";
  }
  var breakTag =
    is_xhtml || typeof is_xhtml === "undefined" ? "<br />" : "<br>";
  return (str + "").replace(
    /([^>\r\n]?)(\r\n|\n\r|\r|\n)/g,
    "$1" + breakTag + "$2"
  );
}