import { MutableRefObject, useCallback, useEffect, useReducer, useRef, useState } from 'react';
import Synthesizer from './Synthesizer';
import useSWR from 'swr';
import NoteLane from './NoteLane';
import Autocomplete from "@mui/joy/Autocomplete";
import uniq from 'lodash/uniq';
import next from 'next/types';
const SERVER_URL = "http://localhost:3012";


const TaggingUI = ({ synthesizerRef }: { synthesizerRef: MutableRefObject<Synthesizer> }) => {
  const [example, setExample] = useState<any>();
  const [allTags, setAllTags] = useState<string[]>([]);
  const fetchedExampleIdRef = useRef(false);

  const loadRandomExample = useCallback(() => {
    let taggingOffset = Number(localStorage.getItem("taggingOffset") || "0");
    // add guess here, e.g. &guessed_category=eq.Bad
    fetch(
      `${SERVER_URL}/examples?order=rand_order&offset=${taggingOffset}&limit=1`
    )
      .then((res) => res.json())
      .then(async (data) => {
        const tags = await fetch(
          `${SERVER_URL}/example_tags?example_id=eq.${data[0].id}`
        ).then((r) => r.json());
        setExample({
          ...data[0],
          tags,
        });
        synthesizerRef.current.setPosition(0);
        synthesizerRef.current.setNotes(data[0].example || []);
        synthesizerRef.current.play();
      });
  }, []);

  const updateCategory = useCallback(
    (category: string) => {

      fetch(
        `${SERVER_URL}/examples?id=eq.${example.id}`,
        {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ category })
        }
      ).then(async (result) => {
        console.log(await result.text());
      })
      nextExample();
    },
    [example]
  );

  const nextExample = useCallback(() => {
    let taggingOffset = Number(localStorage.getItem("taggingOffset") || '0');
    // inputWrapperRef.current?.querySelector('input')?.focus();
    synthesizerRef.current.stop();
    taggingOffset++;
    localStorage.setItem("taggingOffset", taggingOffset.toString());
    loadRandomExample();
  }, []);

  const prevExample = useCallback(() => {
    let taggingOffset = Number(localStorage.getItem("taggingOffset") || '0');
    // inputWrapperRef.current?.querySelector('input')?.focus();
    synthesizerRef.current.stop();
    taggingOffset = Math.max(0, taggingOffset - 1);
    localStorage.setItem("taggingOffset", taggingOffset.toString());
    loadRandomExample();
  }, []);

  // const addTag = useCallback(
  //   (tag: string) => {
  //     setExample({
  //       ...example,
  //       tags: uniq([...(example.tags || []), tag]),
  //     });
  //   },
  //   [example]
  // );

  // const [tag, setTag] = useState('');

  // const inputWrapperRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!fetchedExampleIdRef.current) {
      fetchedExampleIdRef.current = true;
      loadRandomExample();
      // fetch(`${SERVER_URL}/distinct_tags?select=tag`)
      //   .then((res) => res.json())
      //   .then((data) => setAllTags(data.map((d: any) => d.tag)));
    }
    const handleKeyDown = (e: KeyboardEvent) => {
      let taggingOffset = Number(localStorage.getItem("taggingOffset") || '0');
      if (e.key === "ArrowRight") {
        nextExample();
      } else if (e.key === "ArrowLeft") {
        prevExample();
      } else if (e.key === " ") {
        e.preventDefault();
        if (!synthesizerRef.current) {
          synthesizerRef.current = new Synthesizer();
        }
        if (synthesizerRef.current.isPlaying()) {
          synthesizerRef.current.stop();
        } else {
          synthesizerRef.current.setPosition(0);
          synthesizerRef.current.setNotes(example?.example || []);
          synthesizerRef.current.play();
        }
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [example, loadRandomExample, synthesizerRef, nextExample, prevExample]);

  return (
    <div className="fixed top-3 left-3 right-3 bottom-3 bg-slate-700 z-10 p-10">
      <h2>
        Example Tagging <i>(Press 6 to Close)</i>
        {example && (
          <>
            <div className="p-3 bg-slate-950">
              <NoteLane
                notes={example.example || []}
                end={20}
                highlights={[]}
                channel={0}
                instrument={0}
              />
            </div>
            <div className="flex">
              <button
                onClick={() => updateCategory("Good")}
                className={`${
                  example.category === "Good" ? "bg-sky-600" : "bg-slate-800"
                } p-5 w-1/3 mx-1 bg-`}
              >
                Good
              </button>
              <button
                onClick={() => updateCategory("Sophisticated")}
                className={`${
                  example.category === "Sophisticated" ? "bg-sky-600" : "bg-slate-800"
                } p-5 w-1/3 mx-1 bg-`}
              >
                Sophisticated
              </button>
              <button
                onClick={() => updateCategory("Boring")}
                className={`${
                  example.category === "Boring" ? "bg-sky-600" : "bg-slate-800"
                } p-5 w-1/3 mx-1`}
              >
                Boring
              </button>
              <button
                onClick={() => updateCategory("Grace Notes")}
                className={`${
                  example.category === "Grace Notes"
                    ? "bg-sky-600"
                    : "bg-slate-800"
                } p-5 w-1/3 mx-1`}
              >
                Grace Notes
              </button>
              <button
                onClick={() => updateCategory("Bad")}
                className={`${
                  example.category === "Bad"
                    ? "bg-sky-600"
                    : "bg-slate-800"
                } p-5 w-1/3 mx-1`}
              >
                Bad
              </button>
              <button
                onClick={() => updateCategory("Fragmented")}
                className={`${
                  example.category === "Fragmented"
                    ? "bg-sky-600"
                    : "bg-slate-800"
                } p-5 w-1/3 mx-1`}
              >
                Fragmented
              </button>
              <button
                onClick={() => updateCategory("Drums")}
                className={`${
                  example.category === "Drums" ? "bg-sky-600" : "bg-slate-800"
                } p-5 w-1/3 mx-1`}
              >
                Drums
              </button>
            </div>
            {/* <div className="flex mt-10">
              <div className="w-96 mr-10" ref={inputWrapperRef}>
                <Autocomplete
                  options={allTags}
                  value={tag}
                  onInputChange={(e, value) => setTag(value)}
                  className="w-full bg-slate-900 c-slate-100 p-2"
                  autoFocus
                />
              </div>
              <div>
                {example.tags?.length === 0 && "no tags"}
                {example.tags?.map((tag: string) => (
                  <div className="inline-block p-2 mr-1 mb-1 bg-yellow-400">
                    {tag}
                  </div>
                ))}
              </div>
            </div> */}
          </>
        )}
      </h2>
    </div>
  );
};

export default TaggingUI;