import '../css/style.css';
import { sketch } from 'p5js-wrapper';
// https://firebase.google.com/docs/database/web/start

// Firebase import
// import { initializeApp } from 'firebase/app';

// Auth import
// import {
//   getAuth,
//   signInWithPopup,
//   GoogleAuthProvider,
//   signOut,
//   onAuthStateChanged,
// } from 'firebase/auth';

// DB imports
// import {
//   ref,
//   child,
//   get,
//   set,
//   getDatabase,
//   onValue,
//   push,
// } from 'firebase/database';

async function setup() {
  createCanvas(400, 300);

  // GUI
  createButton('Login').position(0, 0).size(60).mousePressed(googleLogin);
  createButton('Logout').position(0, 25).size(60).mousePressed(signout);

  const x = 90;

  const sel = createSelect()
    .position(x, 50)
    .size(200)
    .changed(function () {
      const name = this.value();
      loadDataForUser(name);
    });

  const nameInput = createInput('Name').position(x, 75).size(200);

  const emailInput = createInput('Email').position(x, 100).size(200);

  const ageLabel = createP(`Age: 0`)
    .style('font-size', '16px')
    .position(x, 110);

  const ageSlider = createSlider(0, 150, 0)
    .position(x + 70, 125)
    .style('width', '80px')
    .changed(function () {
      ageLabel.html(`Age: ${this.value()}`);
    });

  createP('Hobby').style('font-size', '16px').position(x, 140);

  const hobbyRadio = createRadio().position(x, 175);
  hobbyRadio.option('Javascript');
  hobbyRadio.option('Firebase');
  hobbyRadio.option('Node');
  hobbyRadio.selected('Javascript');

  createButton('submit')
    .position(x, 220)
    .mousePressed(() => {
      saveUser(
        nameInput.value(),
        emailInput.value(),
        ageSlider.value(),
        hobbyRadio.value()
      );
    });

  // DATABASE
  // initFirebaseApp();

  // On state change
  onAuthStateChanged(/*...*/);

  const db = getDatabase();
  const dbRef = ref(db, `users`);

  // loading from DB

  /*
  onValue(
    dbRef,
    (snapshot) => {
      sel.html(''); // reset drop
      sel.option('');

      snapshot.forEach((childSnapshot) => {
        const childKey = childSnapshot.key;
        const { name } = childSnapshot.val();
      });
    },
    {
      onlyOnce: true,
    }
  );
  */
}

function draw() {
  background(200);
}

function initFirebaseApp() {
  // const firebaseConfig = {};
  // Initialize Firebase
  const firebaseConfig = {
    //... apikey
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
}

function googleLogin() {}

function signout() {}

function saveUser(name, email, age, hobby) {
  // ...
}

/**
 * Here another method to read the users only once
 */
function loadDataForUser(name) {
  const dbRef = ref(getDatabase());

  //...
}

sketch.setup = setup;
sketch.draw = draw;
