(function (wp) {
  "use strict";

  var registerBlockType = wp.blocks.registerBlockType;
  var el = wp.element.createElement;
  var InspectorControls = wp.blockEditor.InspectorControls;
  var useBlockProps = wp.blockEditor.useBlockProps;
  var PanelBody = wp.components.PanelBody;
  var SelectControl = wp.components.SelectControl;
  var TextControl = wp.components.TextControl;
  var ToggleControl = wp.components.ToggleControl;
  var Notice = wp.components.Notice;

  registerBlockType("modelora/model-viewer", {
    title: "Modelora Viewer",
    icon: "format-image",
    category: "media",
    attributes: {
      modelId: { type: "number", default: 0 },
      preset: { type: "string", default: "studio" },
      ar: { type: "boolean", default: false },
      background: { type: "boolean", default: true },
    },
    edit: function (props) {
      var attributes = props.attributes;
      var setAttributes = props.setAttributes;
      var modelId = attributes.modelId || 0;
      var preset = attributes.preset || "studio";
      var ar = !!attributes.ar;
      var background = attributes.background !== false;

      return el(
        "div",
        useBlockProps({ className: "modelora-block-placeholder" }),
        el(
          InspectorControls,
          null,
          el(
            PanelBody,
            { title: "Modelora Settings", initialOpen: true },
            el(TextControl, {
              label: "Model ID",
              type: "number",
              value: modelId,
              onChange: function (value) {
                setAttributes({ modelId: Number(value || 0) });
              },
            }),
            el(SelectControl, {
              label: "Preset",
              value: preset,
              options: [
                { label: "Studio", value: "studio" },
                { label: "Outdoor", value: "outdoor" },
                { label: "Dark", value: "dark" },
              ],
              onChange: function (value) {
                setAttributes({ preset: value });
              },
            }),
            el(ToggleControl, {
              label: "Enable AR",
              checked: ar,
              onChange: function (value) {
                setAttributes({ ar: !!value });
              },
            }),
            el(ToggleControl, {
              label: "Enable Background",
              checked: background,
              onChange: function (value) {
                setAttributes({ background: !!value });
              },
            })
          )
        ),
        el(
          Notice,
          { status: modelId ? "success" : "warning", isDismissible: false },
          modelId ? "3D viewer ready." : "Select a model ID to render the 3D viewer."
        )
      );
    },
    save: function () {
      return null;
    },
  });
})(window.wp);
