@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"),
    url(https://themes.googleusercontent.com/static/fonts/roboto/v9/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff)
      format("woff");
}

$bp-sm: 1250px;

* {
  font-family: "Roboto", sans-serif;
}

.wrap {
  display: flex;
  gap: 20px 0;
  max-width: 1024px;
  margin: 0 auto;

  @media (max-width: $bp-sm) {
    flex-direction: column-reverse;
  }
}

.hidden {
  display: none;
}

.widgets-area {
  border: 1px solid var(--mmq-border-light);
  flex: 1;
  align-self: baseline;
  max-width: 350px;
  min-width: 160px;

  @media (max-width: $bp-sm) {
    padding: 0 30px;
    max-width: 100%;
    align-self: center;
  }
}

.custom-widget {
  padding: 20px;

  @media (max-width: $bp-sm) {
    padding: 0 0 10px 0;
  }

  &__title {
    color: #000;
    font-weight: 300;
    text-align: center;

    @media (max-width: $bp-sm) {
      font-size: 16px;
    }
  }

  &-body {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;

    @media (max-width: $bp-sm) {
      flex-direction: row;
    }
  }

  .image {
    width: 65px;
    height: 60px;
    cursor: pointer;
    clip-path: polygon(
      50% 0%,
      70% 26%,
      98% 35%,
      77% 60%,
      81% 94%,
      50% 74%,
      17% 93%,
      23% 60%,
      2% 35%,
      28% 26%
    );

    @media (max-width: $bp-sm) {
      width: 50px;
      height: 50px;
    }
  }
}

//Wait for product initialization
document.addEventListener("mimeeq-3d-product-initialized", () => {
  const widgetArea = document.querySelector("#widgets");

  if (widgetArea) {
    //Handle content flash when embed loads
    widgetArea.classList.remove("hidden");
  } else {
    return;
  }

  // Get config observers
  const {
    observers: {
      optionSets: { blocks }
    }
  } = window.mimeeqApp;

  // Create widget elements and attach listeners to them
  const handleFabricFinish = (blockData) => {
    const config = blockData.find((data) => {
      return data.blockName === "Fabricfinishes";
    });

    console.log(config);
    console.log({ config });
    const wrapper = document.querySelector("#fabric-body");

    if (!wrapper) {
      return;
    }

    config.options.map((data) => {
      const img = document.createElement("img");

      img.classList.add("image");

      if (!data.src.includes("https") || !data.src.includes("http")) {
        // broken link
        return;
      }

      img.src = data.src;
      wrapper.appendChild(img);

      // Call mimeeqApp markOption action
      img.addEventListener("click", () => {
        window.mimeeqApp.actions.markOption(
          {
            id: data.id,
            optionSetId: data.optionSetId,
            ordinal: data.ordinal,
            code: data.code
          },
          config.id,
          config.widgetType,
          false,
          config.blockName
        );
      });
    });
  };

  // Subscribe to observer and call data handling callback
  blocks.subscribe((blockData) => {
    handleFabricFinish(blockData.newValue);
  });
});