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

import logo from './logo.svg';

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

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello! {props.name}.</p>
        <Button label={`clicked ${ctr} times`} icon="pi pi-check" onClick={()=>{incr(ctr+1)}}/>
      </header>
    </div>
  );
}

WcTestApp.defaultProps = {
  name: 'World'
};

// a wrapper class for react component
class WcTest extends HTMLElement {
  root;

  constructor(){
    super()
    let mountPoint = this;

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

    this.root = ReactDOM.createRoot(mountPoint);
    this.render()
  }

  // declare attributes we want to keep track of
  static get observedAttributes() {
    return ['name', 'onclick'];
  }
  
  // connectedCallback() {
  // }

  render(){
    const name = this.hasAttribute('name')
      ? this.getAttribute('name')
      : undefined;

    this.root.render(<WcTestApp name={name} />);
  }

  attributeChangedCallback(){
    this.render()
  }

}
customElements.define('wc-test', WcTest);