import { createRoot } from "react-dom/client";
import { Card, Toolbar, SpeedDial, ActivityX, ActivityXRenderData } from "react-onsenuix";
import { Icon } from "react-onsenui";
import { Kard } from "./Card";

interface State {
  text: string;
}

class App extends ActivityX<{}, State> {
  constructor(props: any) {
    super(props);
    this.state = { text: "This is an simple application" };
  }

  public onCreateToolbar() {
    return (
      <Toolbar>
        <Toolbar.Center>Title</Toolbar.Center>
        <Toolbar.Right>
          <Toolbar.Button>
            <Icon icon="md-menu" />
          </Toolbar.Button>
        </Toolbar.Right>
      </Toolbar>
    );
  }

  public renderFixed() {
    return (
      <SpeedDial position="bottom right">
        <SpeedDial.Fab>
          <Icon icon="md-share" />
        </SpeedDial.Fab>
        <SpeedDial.Item onClick={() => console.log("Twitter")}>
          <Icon icon="md-twitter" />
        </SpeedDial.Item>
        <SpeedDial.Item onClick={() => console.log("Facebook")}>
          <Icon icon="md-facebook" />
        </SpeedDial.Item>
        <SpeedDial.Item onClick={() => console.log("Google+")}>
          <Icon icon="md-google-plus" />
        </SpeedDial.Item>
      </SpeedDial>
    );
  }

  public onCreate(d: ActivityXRenderData<{}, State>): JSX.Element {
    return (
      <section style={{ textAlign: "center" }}>
        <Kard />
      </section>
    );
  }
}

const app = document.createElement("app");
document.body.prepend(app);
const container = document.querySelector<Element>("app");
const root = createRoot(container!);
root.render(<App />);

import { Card, ViewX } from "react-onsenuix";

class Kard extends ViewX<{}, {}, HTMLDivElement> {
  public createView() {
    return (
      <div>
        <Card>
          <Card.Title>Hello, world!</Card.Title>
          <Card.Content>Hello WORLD AGAIN!!</Card.Content>
        </Card>
      </div>
    );
  }
}

export { Kard };