import { animationPhases } from "./data/animationPhases";
import styles from "./chapter-1.module.css";
import { fromEvent } from "rxjs";

export function drawSelect() {
  const app = document.getElementById("app");
  const select = document.createElement("select");

  select.id = "stateName";
  select.name = "stateKey";
  select.classList.add(styles.select);

  const options = animationPhases.map((phase) => {
    const opt = document.createElement("option");
    opt.value = phase.name;
    opt.text = phase.name.toUpperCase();
    return opt;
  });

  options.forEach((opt) => {
    select.appendChild(opt);
  });

  app?.appendChild(select);

  const selectElem = document.getElementById("stateName") as HTMLSelectElement;

  const select$ = fromEvent(selectElem, "change");

  return select$;
}
