const Cradova = new Comp(function () {
  const [year, setYear] = useState(3, this);

  return h1("Cradova is " + year + " yrs old in ", {
    onclick() {
      setYear((lastYear) => {
        return lastYear + 1;
      });
    },
  });
});

document.body.appendChild(Cradova.render());

import { div, h1, $if, $ifelse, $case, $switch } from "cradova";

function Hello({ name }) {
  return div(
    $if(name === "john", h1("Hello john")),
    $if(name === "paul", h1("Goodbye paul")),
    $ifelse(name === "john", h1("Hello john"), h1("Hello Paul"))
  );
}

const html = div(Hello("john"), Hello("paul"));

function whatsAllowed({ age }) {
  return div(
    $switch(
      age,
      $case(12, h1("too young")),
      $case(26, h1("you are welcome")),
      $case(52, h1("too old"))
    )
  );
}

document.body.append(html, whatsAllowed({ age: 26 }));

import { div, h1 } from "cradova";

function Hello(name) {
  return h1("Hello " + name, {
    className: "title",
    style: {
      color: "grey",
    },
  });
}

const html = div(Hello("peter"), Hello("joe"));

document.body.append(html);

import {
  button,
  createSignal,
  Comp,
  reference,
  h1,
  br,
  div,
  useRef,
} from "cradova";

const count = new Comp(function () {
  const [count, setCounter] = useState(0, this);
  setTimeout(() => {
    setCounter(count + 1);
  }, 1000);
  return h1(" count: " + count);
});

// hello message

function HelloMessage() {
  return div("Click to get a greeting", {
    onclick() {
      const name = prompt("what are your names");
      this.innerText = name ? "hello " + name : "Click to get a greeting";
    },
  });
}

// using CradovaRef

const nameRef = new Comp(function () {
  const [name, setName] = (useState < string) | (undefined > (undefined, this));
  return div(name ? "hello " + name : "Click to get a second greeting", {
    onclick() {
      const name = prompt();
      if (name) {
        setName(name);
      } else {
        alert("Please provide a valid name");
      }
    },
  });
});

// reference (not state)

function typingExample() {
  const ref = useRef();
  return div(
    input({
      oninput() {
        ref.current("text").innerText = this.value;
      },
      placeholder: "typing simulation",
    }),
    p(" no thing typed yet!", { reference: ref.bindAs("text") })
  );
}

function App() {
  return div(count, typingExample, HelloMessage, nameRef);
}

document.body.append(App());

import {
  button,
  createSignal,
  useState,
  div,
  input,
  main,
  p,
  Comp,
  h1,
  useRef,
} from "../dist/index.js";

function TodoList() {
  // can be used to hold multiple references
  const referenceSet = useRef();

  // creating a store
  const todoStore = new createSignal([
    "take bath",
    "code coded",
    "take a break",
  ]);

  // create actions
  todoStore.createAction("add-todo", function (todo) {
    this.set([...this.value, todo]);
  });

  todoStore.createAction("remove-todo", function (todo) {
    const ind = this.value.indexOf(todo);
    this.value.splice(ind, 1);
    this.set(this.value);
  });

  // bind Comp to Signal
  todoStore.bindRef(todoList);

  // markup
  return main(
    p(`|Todo List`),
    div(
      input({
        placeholder: "type in todo",
        reference: referenceSet.bindAs("todoInput"),
      }),
      button("Add todo", {
        onclick() {
          todoStore.fireAction(
            "add-todo",
            referenceSet.current("todoInput").value
          );
          referenceSet.current("todoInput").value = "";
        },
      })
    ),
    todoList.render
  );
}

const todoList = new Comp(function () {
  const self = this;
  return div(
    self.Signal.value.map((item) =>
      p(item, {
        title: "click to remove",
        onclick() {
          self.Signal.fireAction("remove-todo", item);
        },
      })
    )
  );
});
document.body.appendChild(TodoList());

import { Page, Router } from "cradova";

// Comp can be used as page template this way

const template = new Comp(function (name) {
  // an effect run once after page renders
  const self = this;
  self.effect(() => {
    const name = new Promise((res) => {
      res("john doe");
    });
    setTimeout(async () => {
      self.recall(await name);
    }, 1000);
  });
  // effects can be used to make api calls needed for the page
  return div(name ? ">>>>>>>>  Hello  " + name : "  loading...");
});

const home = new Page({
  name: "home page", // page title
  template: () => div(template),
});

// in your routes.ts file
Router.BrowserRoutes({
  // Ways to use paths and Pages
  "*": home,
  "/home": home,
  "/home?": home,
  "/home/:name": home,
  // will be lazy loaded
  "/lazy-loaded-home": async () => await import("./home"),
});
// creates these routes

Router.navigate("/home", data);
// navigates to that page

Router.onPageEvent((lastRoute, newRoute) => {
  console.log(lastRoute, newRoute);
});
// listen for navigation changes