import styles from "./page.module.css";
import postgres from "postgres";

const sql = postgres({
  host: "localhost:5432",
  username: process.env["USERNAME"],
  password: process.env["PASSWORD"],
});

await sql`CREATE TABLE IF NOT EXISTS Messages(name text, message text);`;

function Form() {
  async function onSubmit(formData) {
    "use server";
    const name = formData.get("name");
    const message = formData.get("message");
    await sql`INSERT INTO Messages(name, message) VALUES (${name}, ${message})`;
  }

  return (
    <form
      style={{ display: "flex", flexDirection: "column" }}
      action={onSubmit}
    >
      <label>
        Name
        <input type="text" name="name" />
      </label>
      <label>
        Message
        <input type="text" name="message" />
      </label>
      <button>Chat</button>
    </form>
  );
}

function Message(props) {
  const user = props.user;
  const text = props.text;
  return (
    <p>
      {user}: {text}
    </p>
  );
}

export default async function Home() {
  const messages = await sql`SELECT * FROM Messages`;

  const messageComponents = [];
  let i = -1;
  for (const message of messages) {
    i++;
    messageComponents.push(
      <Message user={message.name} text={message.message} key={i} />,
    );
  }

  return (
    <div className={styles.page}>
      <Form />
      {messageComponents}
    </div>
  );
}