import { h, FunctionalComponent, JSX } from "preact";
import { useState } from "preact/hooks";

const App: FunctionalComponent = function (): JSX.Element {
  const [count, setCount] = useState(5);
  const create = () => {
    parent.postMessage(
      { pluginMessage: { type: "create-rectangles", count: count } },
      "*"
    );
  };

  const cancel = () => {
    parent.postMessage({ pluginMessage: { type: "cancel" } }, "*");
  };

  const onchange = (e) => {
    const target = e.target;
    if (!target) return;
    setCount(Number(target.value));
  }

  return (
    <div className="main-wrapper">
      <h2>Rectangle Creator</h2>
      Count: <input value={count} onChange={onchange} />
      <div className="operate">
        <button onClick={create}>
          Create
        </button>
        <button onClick={cancel}>Cancel</button>
      </div>
    </div>
  );
};

export default App;