import {
  makeId,
  sql,
  useDbQuery,
  useFirstRowDbQuery,
  useRunDbQuery,
} from "@kikko-land/react";

type Note = { id: string; title: string };
const notesTable = sql.table`notes`;

export const Notes = () => {
  const notes = useDbQuery<Note>(sql`SELECT * FROM ${notesTable}`);
  const notesCount = useFirstRowDbQuery<{ count: number }>(
    sql`SELECT COUNT(*) FROM ${notesTable}`
  );

  const [addNote, addNoteState] = useRunDbQuery((db) => async () => {
    const id = makeId();

    await db.runQuery(
      sql`INSERT INTO ${notesTable}(id, title) VALUES(${id}, ${`Note#${id}`})`
    );
  });

  return (
    <>
      <button
        onClick={addNote}
        disabled={
          addNoteState.type === "running" || addNoteState.type === "waitingDb"
        }
      >
        Add note
      </button>
      <div>Add note result: {JSON.stringify(addNoteState)}</div>
      <div>Query result (total notes count: {notesCount.data?.count})</div>
      <pre>{JSON.stringify(notes)}</pre>
    </>
  );
};