<script src="https://unpkg.com/tripetto"></script>
    <script src="https://unpkg.com/tripetto-block-checkbox"></script>
    <script src="https://unpkg.com/tripetto-block-checkboxes"></script>
    <script src="https://unpkg.com/tripetto-block-dropdown"></script>
    <script src="https://unpkg.com/tripetto-block-email"></script>
    <script src="https://unpkg.com/tripetto-block-hidden-field"></script>
    <script src="https://unpkg.com/tripetto-block-number"></script>
    <script src="https://unpkg.com/tripetto-block-radiobuttons"></script>
    <script src="https://unpkg.com/tripetto-block-text"></script>
    <script src="https://unpkg.com/tripetto-block-textarea"></script>
    <script src="https://unpkg.com/tripetto-block-url"></script>
    <link
      href="https://fonts.googleapis.com/css?family=Lato&display=swap"
      rel="stylesheet"
    />
    <div id="tripetto-builder"></div>
    <div id="cf7">
      <h1>Visual Form Builder for Contact Form 7</h1>
      <p>
        This tool allows you to create Contact Form 7 forms. But way more easy
        and way more fun!<br /><br />
        Just copy-paste the code in your Contact Form 7 Plugin.
      </p>
      <textarea id="cf7-text" onfocus="this.select();">
Create a form in the editor at the left and see the Contact Form 7 code here!</textarea
      >
      <small>
        <strong
          >This tool is built with
          <a href="https://tripetto.com" target="_blank"
            ><img
              src="https://tripetto.com/images/tripetto-logo.svg"
              alt="Logo Tripetto"
            />Tripetto</a
          >.</strong
        ><br />Tripetto offers multiple solutions for revolutionary form
        building, including a
        <a href="https://tripetto.com/wordpress" target="_blank"
          >WordPress Plugin</a
        >
        and a <a href="https://tripetto.com/sdk" target="_blank">SDK</a>.
      </small>
    </div>

#tripetto-builder {
  position: absolute;
  left: 0;
  top: 0;
  right: 30%;
  bottom: 0;
}

#cf7 {
  position: absolute;
  left: 70%;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  padding: 15px;
  font-family: 'Lato', sans-serif;
  color: #333;
  cursor: default;
  line-height: 1.5em;
  
  h1 {
    font-size: 24px;
    padding-left: 10px;
  }
  
  p {
    color: #666;
    margin: 0;
    padding-left: 10px;
  }
  
  textarea {
    width: 93%;
    height: 400px;
    background-color: #f6f6f6;
    border: 2px solid #e6e6e6;
    padding: 8px;
    margin-top: 24px;
    margin-bottom: 8px;
  }
  
  small {
    color: #999;
    padding-left: 10px;
    display: block;
    
    a {
      color: #999;
      
      &:hover {
        color: #666;
      }
    }
    
    img {
      width: 20px;
      height: 20px;
      position: relative;
      top: 5px;
      margin-left: 4px;
      margin-right: 6px;
    }
  }
}

function convertToCF7(def) {
  if (!def || !def.clusters || def.clusters.length === 0) {
    return "";
  }

  if (def.clusters.length > 1) {
    return "Please use just one cluster. You can remove a cluster with the '...' button in the upper right corner of the cluster.";
  }

  var cluster = def.clusters[0];
  if (cluster.branches) {
    return "Branches are not supported by Contact Form 7. You can remove a branch with the '...' button in the upper right corner of the branch.";
  }

  var nodes = cluster.nodes || {};
  if (cluster === {} || cluster.nodes === {}) {
    return "Add a question block first";
  }

  var cf7 = "";

  nodes.forEach(node => {
    if (!node.block) {
      return;
    }

    var nameVisible = node.nameVisible;
    var tag = "";
    var firstSlot = (node.slots && node.slots[0]) || {};

    switch (node.block.type) {
      case "tripetto-block-text":
        tag = defaultTagFormat(
          "text",
          firstSlot.required,
          firstSlot.alias || node.name,
          node.placeholder
        );
        break;
      case "tripetto-block-email":
        tag = defaultTagFormat(
          "email",
          firstSlot.required,
          firstSlot.alias || node.name,
          node.placeholder
        );
        break;
      case "tripetto-block-url":
        tag = defaultTagFormat(
          "url",
          firstSlot.required,
          firstSlot.alias || node.name,
          node.placeholder
        );
        break;
      case "tripetto-block-number":
        range = ``;
        if (firstSlot.minimum !== undefined) {
          range += ` min:${firstSlot.minimum}`;
        }
        if (firstSlot.maximum !== undefined) {
          range += ` max:${firstSlot.maximum}`;
        }

        tag = defaultTagFormat(
          "number",
          firstSlot.required,
          firstSlot.alias || node.name,
          node.placeholder,
          range
        );
        break;
      case "tripetto-block-textarea":
        tag = defaultTagFormat(
          "textarea",
          firstSlot.required,
          firstSlot.alias || node.name,
          node.placeholder
        );
        break;
      case "tripetto-block-dropdown":
        options = "";
        if (node.block.options) {
          options = node.block.options.reduce((previous, current) => {
            return `${previous} "${current.name}"`;
          }, "");
        }

        tag = defaultTagFormat(
          "select",
          firstSlot.required,
          firstSlot.alias || node.name,
          node.placeholder,
          options
        );
        break;
      case "tripetto-block-checkboxes":
        options = "";
        if (node.block.checkboxes) {
          options = node.block.checkboxes.reduce((previous, current) => {
            return `${previous} "${current.name}"`;
          }, "");
        }

        tag = defaultTagFormat(
          "checkbox",
          false,
          node.block.alias || node.name,
          node.placeholder,
          options
        );
        break;
      case "tripetto-block-radiobuttons":
        options = "";
        if (node.block.buttons) {
          options = node.block.buttons.reduce((previous, current) => {
            return `${previous} "${current.name}"`;
          }, "");
        }

        tag = defaultTagFormat(
          "radio",
          false,
          firstSlot.alias || node.name,
          node.placeholder,
          options
        );
        break;
      case "tripetto-block-checkbox":
        tag = `${defaultTagFormat(
          "acceptance",
          false,
          firstSlot.alias || node.name,
          "",
          firstSlot.required ? "" : " optional"
        )} ${node.name} [/acceptance]`;
        break;
      case "tripetto-block-hidden-field":
        custom = "";
        if (node.block.fieldType === "querystring") {
          custom = " default:get";
        }

        tag = defaultTagFormat(
          "hidden",
          false,
          firstSlot.alias || node.name,
          "",
          custom
        );
        break;
      default:
        break;
    }

    if (node.nameVisible && node.name) {
      tag = label(node.name, tag);
    }

    cf7 += `${tag}\n\n`;
  });

  if (cf7 === "") {
    cf7 =
      "Create a form in the editor at the left and see the Contact Form 7 code here!";
  }

  return cf7;
}

function defaultTagFormat(tag, required, name, placeholder, custom = "") {
  return `[${tag}${formatRequired(required)} ${formatName(
    name
  )}${formatPlaceholder(placeholder)}${custom}]`;
}

function formatName(name) {
  if (!name) {
    return "";
  }
  return name.replace(/[^a-zA-Z0-9/-]/g, "");
}

function formatPlaceholder(value) {
  if (!value) {
    return "";
  }
  return ` placeholder "${value}"`;
}

function formatRequired(value) {
  return value ? "*" : "";
}

function label(name, tag) {
  if (!name) {
    return tag;
  }

  return `<label> ${name}\n    ${tag} </label>`;
}

function updateCF7Area(def) {
  document.getElementById("cf7-text").value = convertToCF7(def);
}

const builder = new Tripetto.Builder({
  element: document.getElementById("tripetto-builder"),
  onReady: function() {
    updateCF7Area(defaultDefinition);
  },
  onChange: updateCF7Area,
  disableSaveButton: true,
  disableEditButton: true,
  disableCloseButton: true,
  supportURL: false
});

var defaultDefinition = {
  clusters: [
    {
      id: "7cba14021a4218d251e6e34121d63d25f1b481b757fbdea377cfa7ad410eaf57",
      nodes: [
        {
          id:
            "f1d8d2c3091cc9d7d180175dd0ad023b9fbd1534f0940b3b86c62b98b92cc744",
          name: "Your Name (required)",
          nameVisible: true,
          slots: [
            {
              id:
                "c7df6eff49ec63c035c3f951d623e6870b80c7578e3bfd02bcfa0d066b2cf875",
              type: "text",
              kind: "static",
              reference: "value",
              label: "Text",
              alias: "your-name",
              required: true
            }
          ],
          block: { type: "tripetto-block-text", version: "2.0.0" }
        },
        {
          id:
            "3edab705a37b515de7f2a4c1804c0421b22d4b1aef5111bc5feeefa08b153279",
          name: "Your Email (required)",
          nameVisible: true,
          slots: [
            {
              id:
                "f0994c3124831cc77fc642d18d9d57ee8b8cf215550642da4d526b49c6cf23b3",
              type: "string",
              kind: "static",
              reference: "email",
              label: "Email address",
              alias: "your-email"
            }
          ],
          block: { type: "tripetto-block-email", version: "2.0.0" }
        },
        {
          id:
            "e75e6129177e3bf97e0cc9780c06fe7ba9ccecb8b7c7dfce66c43430fc07eb3f",
          name: "Subject",
          nameVisible: true,
          slots: [
            {
              id:
                "b911c5a6544d1dad2d6bdc8fdd80f7abe0d24ba702a8b957d49bb6694329d3e4",
              type: "text",
              kind: "static",
              reference: "value",
              label: "Text",
              alias: "your-subject"
            }
          ],
          block: { type: "tripetto-block-text", version: "2.0.0" }
        },
        {
          id:
            "371740a8800b83a02211e1c75363033ed6f50809861013a2dcc072a9378ac2b9",
          name: "Your Message",
          nameVisible: true,
          slots: [
            {
              id:
                "4f21a43a75c6f601beabdf4a164f9333c7e726ca7c58765be82e477410168014",
              type: "text",
              kind: "static",
              reference: "value",
              label: "Multi-line text",
              alias: "your-message"
            }
          ],
          block: { type: "tripetto-block-textarea", version: "2.0.0" }
        }
      ]
    }
  ],
  builder: { name: "tripetto", version: "1.2.6" }
};

builder.open(defaultDefinition);