import React from "react";
import reactifyWc from "reactify-wc";

// Import your web component. This one defines a tag called 'vaadin-button'
import "@vaadin/vaadin-button";

const onClick = () => console.log("hello world");

const VaadinButton = reactifyWc("vaadin-button");

export const MyReactComponent = () => (
  <>
    <h1>Hello world</h1>
    <VaadinButton onClick={onClick}>Click me!</VaadinButton>
  </>
);

const Example = () => (
  <VaadinButton onClick={handleClick}>Click</VaadinButton>
  // calls addEventListener('click', handleClick)
  // The 'on' prefix is truncated, and the next char lowercased

  <VaadinButton on-my-event={handleMyEvent}>Click</VaadinButton>
  // calls addEventListener('my-event', handleMyEvent)
  // The 'on-' prefix is truncated

  <VaadinButton functionalProp={functionalProp}>Click</VaadinButton>
  // adds a prop 'functionalProp' -> functionalProp
)

const WriteNames = ({ names }) => names.map((name) => <p>{name}</p>);
const ReactifiedWc = reactifyWc("web-comp");

const names = ["Bryce", "Brion", "Pia", "Fabian", "Larry"];

const MyComponent = () => (
  <ReactifiedWc>
    <WriteNames names={names} />
  </ReactifiedWc>
);

import React from "react";
import reactifyWc from "reactify-wc";

// Import your web component. This one defines a tag called 'my-element'
import "@vaadin/vaadin-button";

const VaadinButton = reactifyWc("my-element", {
  forceProperty: ["setMeAsAProp"],
  forceAttribute: ["setMeAsAnAttribute"],
  forceEvent: ["setMeAsAnEventListener"],
});

export const MyReactComponent = () => (
  <VaadinButton
    setMeAsAProp="value"
    setMeAsAnAttribute={[]}
    setMeAsAnEventListener={() => {}}
  >
    Click me!
  </VaadinButton>
);

const VaadinButton = reactify("vaadin-button");

export const MyReactComponent = () => (
  <VaadinButton onClick={onClick} style={{ color: "red" }}>
    Click me!
  </VaadinButton>
);

// Preferred method

const VaadinGrid = reactifyWc("vaadin-grid");
const VaadinGridColumn = reactifyWc("vaadin-grid-column");

const MyReactComponent = () => (
  <VaadinGrid items={items}>
    <VaadinGridColumn path="name.first" header="First name" onClick={onClick} />
    <VaadinGridColumn path="name.last" header="Last name" />
  </VaadinGrid>
);

// Will work, not preferred

const VaadinGrid = reactifyWc("vaadin-grid");

const MyReactComponent = () => (
  <VaadinGrid items={items}>
    <vaadin-grid-column path="name.first" header="First name" />
    <vaadin-grid-column path="name.last" header="Last name" />
  </VaadinGrid>
);

// Will work, not preferred

const VaadinGrid = reactifyWc("vaadin-grid");
const VaadinGridColumn = reactifyWc("vaadin-grid-column");

const MyReactComponent = () => (
  <VaadinGrid items={items}>
    <VaadinGridColumn path="name.first" header="First Name" onClick={onClick} />
    <vaadin-grid-column path="name.last" header="Last Name" />
  </VaadinGrid>
);