import.html

<style>
  :root {
    --spacing: 0.8rem;
  }

  * {
    box-sizing: border-box;
  }

  body {
    background-color: var(--figma-color-bg);
    color: var(--figma-color-text);
    margin: 0;
    padding: var(--spacing);
  }

  html,
  body {
    height: 100%;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    height: 100%;
  }

  button {
    appearance: none;
    border-radius: 4px;
    padding: var(--spacing);
  }

  select,
  input,
  textarea {
    font-family: Andale Mono, monospace;
    font-size: 0.9rem;
    padding: var(--spacing);
  }

  textarea {
    flex: 1;
    white-space: pre;
  }

  form>* {
    display: block;
    width: 100%;
  }

  button {
    background-color: var(--figma-color-bg-brand);
    border: none;
    color: var(--figma-color-text-onbrand);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
    font-weight: bold;
  }

  select,
  input,
  textarea {
    background-color: var(--figma-color-bg-secondary);
    color: var(--figma-color-text-secondary);
    border: 2px solid var(--figma-color-border);
  }

  input:focus,
  textarea:focus {
    border-color: var(--figma-color-border-selected);
    outline: none;
  }

  select,
  input {
    flex: 1;
  }

  form .row {
    display: flex;
    gap: 0.5rem;
  }
</style>
<form>
  <div class="row">
    <select id="collectionSelect"></select>
    <input placeholder="Collection Name" required type="text" id="collectionInput" />
  </div>

  <div class="row">
    <select id="modeSelect"></select>
    <input placeholder="Mode Name" required type="text" id="modeInput" />
  </div>

  <textarea required placeholder="Tokens JSON">
{
  "color": {
    "grouptyped": {
      "$type": "color",
      "brown": { "$value": "#a2845e" },
      "danger-deep": { "$value": "{color.valuetyped.danger}" }
    },
    "valuetyped": {
      "red": {
        "$value": "{color.deep.deep.deep.deep.deep}"
      },
      "danger": { "$value": "{color.valuetyped.red}" }
    },
    "deep": {"deep": {"deep": {"deep": {"deep": {"$type": "color", "$value": "#FF0000" }}}}}
  },
  "spacing": {
    "$type": "number",
    "some numbers": {
      "spacer0": {"$value": 0},
      "spacerXs": {"$value": 4},
      "spacerS": {"$value": 8},
      "spacerM": {"$value": 16},
      "spacerX": {"$value": 24},
      "spacerXl": {"$value": 32},
      "spacerXxl": {"$value": 40},
      "spacex": {
        "funniness": {"$value": 0},
        "cleverness": {"$value": 1}
      }
    }
  }
}
</textarea>
  <button type="submit">Import Variables</button>
</form>

<script>
  const NEW_VALUE = "new";
  let collections = {};
  const collectionSelect = document.getElementById("collectionSelect");
  const collectionInput = document.getElementById("collectionInput");
  const modeSelect = document.getElementById("modeSelect");
  const modeInput = document.getElementById("modeInput");

  function renderOptions(select, newName, options = []) {
    options = [{ name: `+ New ${newName}`, value: NEW_VALUE }, ...options];
    select.innerHTML = options
      .map(
        ({ name, value = name }) => `<option value="${value}">${name}</option>`
      )
      .join("");
    select.value = NEW_VALUE;
  }

  window.onmessage = (event) => {
    let message = event.data.pluginMessage;
    let collectionOptions = [];

    if (message.type === "LOAD_COLLECTIONS") {
      collections = {};
      const options = [];
      Object.entries(message.collections).forEach(([name, collection]) => {
        collections[collection.id] = collection;
        options.push({
          name,
          value: collection.id,
        });
      });

      renderOptions(collectionSelect, "Collection", options);
      handleCollectionChange();
    }

    collectionSelect.append(...collectionOptions);
  };

  function hideInputElement(inputElement, value) {
    inputElement.style.display = "none";
    // handle the case if it's an existing mode
    inputElement.value = value;
    // disable input
    inputElement.disabled = true;
  }

  function showInputElement(inputElement) {
    inputElement.style.display = "block";
    inputElement.disabled = false;
    inputElement.value = "";
  }

  function handleCollectionChange() {
    // handle the case if it's a new Collection
    const currentCollection = collections[collectionSelect.value];
    // enable input
    if (collectionSelect.value === NEW_VALUE) {
      showInputElement(collectionInput);
      renderOptions(modeSelect, "Mode");
      handleModeChange();
      collectionInput.focus();
    } else {
      hideInputElement(collectionInput, collectionSelect.value);
      renderOptions(
        modeSelect,
        "Mode",
        currentCollection.modes.map(({ modeId, name }) => ({
          name,
          value: modeId,
        }))
      );
      // set to default mode on collection change
      modeSelect.value = currentCollection.defaultModeId || "new";
      handleModeChange();
    }
  }

  function handleModeChange() {
    // enable input
    if (modeSelect.value === NEW_VALUE) {
      showInputElement(modeInput);
      modeInput.focus();
    } else {
      hideInputElement(modeInput, modeSelect.value);
    }
  }

  collectionSelect.addEventListener("change", handleCollectionChange);
  modeSelect.addEventListener("change", handleModeChange);

  document.querySelector("form").addEventListener("submit", (e) => {
    const selectedCollection = {
      name: collectionInput.value.trim(),
      id: collectionSelect.value === NEW_VALUE ? null : collectionSelect.value,
    };
    const selectedMode = {
      name: modeInput.value.trim(),
      id: modeSelect.value === NEW_VALUE ? null : modeSelect.value,
    };
    const body = document.querySelector("textarea").value.trim();
    e.preventDefault();
    if (isValidJSON(body) && selectedCollection.name) {
      parent.postMessage(
        {
          pluginMessage: {
            selectedCollection,
            selectedMode,
            body,
            type: "IMPORT",
          },
        },
        "*"
      );
    } else {
      alert("Invalid filename or JSON");
    }
  });

  function isValidJSON(body) {
    try {
      JSON.parse(body);
      return true;
    } catch (e) {
      return false;
    }
  }
</script>