const parseDataTypes = (data_types) => {
  let template = `<div id="data-menu" class="data-menu">`;
  template += buildDataTypesTemplate(data_types);
  template += `<br/>`;
  template += buildProductsTemplates(data_types);
  template += `</div>`;
  return template;
};

const buildDataTypesTemplate = (data_types) => {
  let template = `<div class="btn-group" role="group" aria-label="Data Menu">`;
  data_types.forEach((data_type, index) => {
    template += `
          <input 
            id="data_type_label-${index}" 
            role="button" 
            type="radio" 
            class="btn-check" 
            name="data_type_radio" 
            data-bs-toggle="collapse" 
            data-bs-parent="#data-menu"
            data-bs-target="#data_type-${index}" 
            aria-controls="data_type-${index}"
          >
          <label for=data_type_label-${index} class="btn btn-outline-primary">${data_type.name}</label>
      `;
  });
  template += `</div>`;
  return template;
};

const buildProductsTemplates = (data_types) => {
  var template = "";

  data_types.forEach((data_type, index) => {
    template += `
    <div class="btn-group collapse pt-1" role="group" aria-label="Products Menu" id="data_type-${index}" data-bs-parent="#data-menu">
    `;

    data_type.products.forEach((product) => {
      template += `
          <input
            id="product-${product.name}" 
            role="button"
            type="radio" 
            class="btn-check" 
            name="product_radio"
            data-bs-parent="data_type-${index}"
          >
          <label for="product-${product.name}" class="btn btn-outline-primary" onclick="loadSim('${product.name}')">${product.name}</label>
      `;
    });

    template += `</div>`
  });

  return template;
};
