const iframe = document.getElementById("figma-embed-iframe");

const variant1Button = document.getElementById("btn-variant-1");
const variant2Button = document.getElementById("btn-variant-2");
const variantDefaultButton = document.getElementById("btn-variant-default");

const instanceNodeId = "1:10";
const variant1Id = "1:8";
const variant2Id = "1:14";
const variantDefaultId = "1:6";

function changeComponentInstanceToVariant(newVariantId) {
  iframe.contentWindow.postMessage(
    {
      type: "CHANGE_COMPONENT_STATE",
      data: {
        nodeId: instanceNodeId,
        newVariantId: newVariantId,
      },
    },
    "https://www.figma.com"
  );
}

variant1Button.addEventListener("click", () => {
  changeComponentInstanceToVariant(variant1Id);
});

variant2Button.addEventListener("click", () => {
  changeComponentInstanceToVariant(variant2Id);
});

variantDefaultButton.addEventListener("click", () => {
  changeComponentInstanceToVariant(variantDefaultId);
});