(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/datacenter-calculator", {
    title: "Data Center Costs 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", {}, "Data Center Costs Calculator"),
          el(
            "form",
            { className: "maple-calc-form" },
            el(
              "div",
              { className: "form-group" },
              el(TextControl, {
                label: "Power Usage (kW)",
                type: "number",
                value: "",
                onChange: () => {},
              }),
            ),
            el(
              "div",
              { className: "form-group" },
              el(TextControl, {
                label: "Cost per kWh ($)",
                type: "number",
                value: "",
                onChange: () => {},
              }),
            ),
            el(
              "div",
              { className: "form-group" },
              el(TextControl, {
                label: "Rack Space (units)",
                type: "number",
                value: "",
                onChange: () => {},
              }),
            ),
            el(
              "button",
              { type: "button", className: "calculate-button" },
              "Calculate",
            ),
          ),
          el(
            "div",
            { className: "results" },
            el("h3", {}, "Results"),
            el("p", {}, el("strong", {}, "Power Cost (Monthly): "), "$---"),
            el("p", {}, el("strong", {}, "Cooling Cost (Monthly): "), "$---"),
            el("p", {}, el("strong", {}, "Rack Cost (Monthly): "), "$---"),
            el("p", {}, el("strong", {}, "Total Monthly Cost: "), "$---"),
            el("p", {}, el("strong", {}, "Total Annual Cost: "), "$---"),
            el(
              "div",
              { className: "chart-container" },
              el("canvas", { className: "datacenter-chart" }),
            ),
          ),
        ),
      ];
    },
    save: function () {
      return null;
    },
  });
})(
  window.wp.blocks,
  window.wp.element,
  window.wp.blockEditor,
  window.wp.components,
);