import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";

const CounterComponent = ({ id, send, receive, start }) => {
  const [count, setCount] = useState(start);
  const [serverMessage, setServerMessage] = useState("");

  useEffect(() => {
    receive(`${id}:even`, (event) => {
      setServerMessage(event.msg);
    });

    receive(`${id}:odd`, (event) => {
      setServerMessage("");
    });
  }, []);

  return (
    <div className="flex flex-row gap-8 items-center ">
      <button
        className="border-2 rounded-md px-4 py-2 bg-lime-300"
        onClick={() => setCount(count + 1)}
      >
        +
      </button>
      <p className="text-lg">{count}</p>
      <button
        className="border-2 rounded-md px-4 py-2 bg-lime-300"
        onClick={() => setCount(count + 1)}
      >
        -
      </button>
      <button
        onClick={() =>
          send("from-react", { id, count }, (reply) => {
            console.log(reply);
          })
        }
      >
        Send To server
      </button>
      <p className="text-red-600">{serverMessage}</p>
    </div>
  );
};

export var CounterHook = {
  mounted() {
    let el = this.el;
    let id = el.getAttribute("id");
    let start = parseInt(el.getAttribute("start"));

    const root = createRoot(el);
    root.render(
      <CounterComponent
        id={id}
        start={start}
        send={this.pushEvent.bind(this)}
        receive={this.handleEvent.bind(this)}
      />
    );
  },
};