import './styles.css'
import { CustomKeyboard, CustomKeyboardOptions } from "./keyboard";
import { AutoCorrect } from './autocorrect';
import { WebTTSOutput } from "audiogame-tools/engine/tts/outputs/webtts";
import { TTS } from "audiogame-tools/engine/tts";
import Resonator from "audiogame-tools/engine/resonator";
import { UIWindow, Button, Text, List, ListItem, Checkbox } from "./ui";
import { DOMNavigator } from './dom-nav';
import { ItemFocusEvent } from './eventing/events';
import { RadioGroup } from './ui/radio-group';


const tts = new TTS(new WebTTSOutput());
const sound = new Resonator();
const keyChar = sound.loadImmediate(`keyChar.wav`);
const keyFocus = sound.loadImmediate(`keyDelete.wav`);
const sfxCorrect = sound.loadImmediate(`macroSet.wav`);



let corrector: AutoCorrect;

let currentWord = '';

setupAutoCorrect();


const keyboardContainer = document.getElementById('custom-keyboard') as HTMLElement;
const keyboardLayout: CustomKeyboardOptions = {
  leftKeys: [
    ['q', 'w', 'e', 'r', 't'],
    ['a', 's', 'd', 'f', 'g'],
    ['z', 'x', 'c', 'v'],
    ['⇧', '⌫', ' '],
  ],
  rightKeys: [
    ['y', 'u', 'i', 'o', 'p'],
    ['h', 'j', 'k', 'l', ';'],
    ['b', 'n', 'm', ', ', '.'],
    [' ', '↩', '⇩'],
  ],
};

const customKeyboard = new CustomKeyboard(keyboardContainer, keyboardLayout);
customKeyboard.on('keyDown', (event: CustomEvent) => {
  keyFocus.play();
  speak(event.detail.key);
});
customKeyboard.on('keyUp', (event: CustomEvent) => {
  keyChar.play();
  // speak(event.detail.key);
  speak(currentWord);
  if (event.detail.key !== " ") {
    currentWord += event.detail.key;
  } else {
    if (!corrector) return;
    const corrected = corrector.correct(currentWord, 4);
    if (corrected) {
      speak(corrected);
      sfxCorrect.play();
    }
    currentWord = '';
  }
});

customKeyboard.show();


async function setupAutoCorrect() {
  const res = await fetch(`dictionary.json`);
  const dictionary = await res.json();
  corrector = new AutoCorrect(dictionary);
  sfxCorrect.play();
}

function speak(text: string) {
  tts.stop();
  tts.speak(text);
}

/**

const win = new UIWindow("Test window");
const btn = new Button("Here is a button");
btn.onClick(() => speak(`Button clicked`));
win.add(btn);
win.add(new Button("Here is another button"));
win.add(new Text("Here is some text"));
win.add(new Text("And some more text"));
const list = new List("A list view");
list.add(new ListItem("Entry one"));
list.add(new ListItem("Entry two"));
win.add(list);
const radio = new RadioGroup("Select one", [{
  key: "meow", value: "Meow"
},
{ key: "woof", value: "Woof" },
{ key: "rawr", value: "Rawr" }]);
win.add(radio);
const checkbox = new Checkbox("Toggle me");
win.add(checkbox);
document.getElementById("app")?.appendChild(win.show() as any);

const nav = new DOMNavigator(document.body);

nav.registerHandler<ItemFocusEvent>("ItemFocusEvent", (ev) => {
  keyFocus.play();
  speak(ev.data?.friendlyName!);
  if (nav.hasSiblings()) {
    sfxCorrect.play();
  }
})
*/

const testTTS = document.createElement("button");
testTTS.addEventListener("click", e => {
  speak(`Meow`);
});
document.getElementById("app")?.appendChild(testTTS);