import React, { useState } from 'react';
import { Button } from 'primereact/button';
import ReactDOM from 'react-dom/client';

import logo from './logo.svg';

const WcTestApp = () => {
  const [ctr,incr] = useState(0)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button label={`clicked ${ctr} times`} icon="pi pi-check" onClick={()=>{incr(ctr+1)}}/>
      </header>
    </div>
  );
}

class WcTest extends HTMLElement {
  connectedCallback() {
    const mountPoint = this;
    // to get attributes from outside
    // const name = this.getAttribute('name');

    // ShadowRoot (global styles will not apply, but safer with a complete isolation layer)
    // this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const root = ReactDOM.createRoot(mountPoint);

    // render
    root.render(<WcTestApp />);
  }
}
customElements.define('wc-test', WcTest);