(function (blocks, element, blockEditor, components) {
  var el = element.createElement;
  var useBlockProps = blockEditor.useBlockProps;
  var BlockControls = blockEditor.BlockControls;
  var AlignmentToolbar = blockEditor.AlignmentToolbar;
  var TextControl = components.TextControl;

  blocks.registerBlockType("maple/roi-calculator", {
    title: "ROI Calculator",
    icon: "calculator",
    category: "common",
    attributes: {
      align: {
        type: "string",
      },
    },
    supports: {
      align: true,
    },
    edit: function (props) {
      const blockProps = useBlockProps({
        className: props.attributes.align
          ? "align" + props.attributes.align
          : "",
      });

      return [
        el(
          BlockControls,
          { key: "controls" },
          el(AlignmentToolbar, {
            value: props.attributes.align,
            onChange: (newAlign) => {
              props.setAttributes({ align: newAlign });
            },
          }),
        ),
        el(
          "div",
          blockProps,
          el("h2", {}, "ROI Calculator"),
          el(
            "form",
            { className: "maple-calc-form" },
            el(
              "div",
              { className: "form-group" },
              el(TextControl, {
                label: "Initial Investment ($)",
                type: "number",
                value: "",
                onChange: () => {},
              }),
            ),
            el(
              "div",
              { className: "form-group" },
              el(TextControl, {
                label: "Annual Return Rate (%)",
                type: "number",
                value: "",
                onChange: () => {},
              }),
            ),
            el(
              "div",
              { className: "form-group" },
              el(TextControl, {
                label: "Time (Years)",
                type: "number",
                value: "",
                onChange: () => {},
              }),
            ),
            el(
              "button",
              { type: "button", className: "calculate-button" },
              "Calculate",
            ),
          ),
          el(
            "div",
            { className: "results" },
            el("h3", {}, "Results"),
            el("p", {}, el("strong", {}, "Final Value: "), "$---"),
            el("p", {}, el("strong", {}, "Net Profit: "), "$---"),
            el("p", {}, el("strong", {}, "ROI (%): "), "---%"),
            el(
              "div",
              { className: "chart-container" },
              el("canvas", { className: "roi-chart" }),
            ),
          ),
        ),
      ];
    },
    save: function () {
      return null;
    },
  });
})(
  window.wp.blocks,
  window.wp.element,
  window.wp.blockEditor,
  window.wp.components,
);