const puppeteer = require("puppeteer");

puppeteer
  .launch({ headless: false, defaultViewport: null })
  .then(async browser => {
    try {
      const page = await browser.newPage();
      await page.goto("https://www.keybr.com/", {
        waitUntil: "domcontentloaded"
      });
      console.log("page visited");
      await page.waitFor(1000); //wait for one second
      await page.waitFor(".Tour-close", { visible: true });
      await page.waitFor(1000); //wait for one second
      await page.click(".Tour-close");
      console.log("walkthrough closed");
      await page.waitFor(1000); //wait for one second
      await page.waitFor(".Practice-textInput", { visible: true });
      await page.click(".Practice-textInput");

      console.log("typing pane activated");

      await page.waitFor(1000); //wait for one second
      await page.waitFor(".TextInput-item", { visible: true });

      const charArr = await page.$$eval(".TextInput-item", el =>
        el.map(({ innerText }) => innerText)
      );

      //   copy pasted from:
      // https://codeburst.io/javascript-async-await-with-foreach-b6ba62bbf404

      async function asyncForEach(array, callback) {
        for (let index = 0; index < array.length; index++) {
          await callback(array[index], index, array);
        }
      }

      const type = async charArr => {
        await asyncForEach(charArr, async char => {
          if (char === "␣") {
            await page.keyboard.press("Space", { delay: 1000 / 14 });
            return;
          }
          await page.keyboard.press(char, { delay: 1000 / 14 });
          console.log(`pressed ${char}`);

          return;
        });
        console.log("Done")
      };

      type(charArr);
    } catch (error) {
      console.log(error.message);
    }
  });