import { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setRef, setCaretRef } from "store/actions";
import { State } from "store/reducer";
import "stylesheets/Test.scss";

export default function Test() {
    const {
        word: { typedWord, currWord, wordList, typedHistory },
        time: { timer },
    } = useSelector((state: State) => state);
    const dispatch = useDispatch();
    const extraLetters = typedWord.slice(currWord.length).split("");
    const activeWord = useRef<HTMLDivElement>(null);
    const caretRef = useRef<HTMLSpanElement>(null);

    useEffect(() => {
        dispatch(setRef(activeWord));
        dispatch(setCaretRef(caretRef));
    }, [dispatch]);

    return (
        <div className="test">
            <div className="timer">{timer}</div>
            <div className="box">
                {wordList.map((word, idx) => {
                    const isActive =
                        currWord === word && typedHistory.length === idx;
                    return (
                        <div
                            key={word + idx}
                            className="word"
                            ref={isActive ? activeWord : null}>
                            {isActive ? (
                                <span
                                    ref={caretRef}
                                    id="caret"
                                    className="blink"
                                    style={{
                                        left: typedWord.length * 14.5833,
                                    }}>
                                    |
                                </span>
                            ) : null}
                            {word.split("").map((char, charId) => {
                                return <span key={char + charId}>{char}</span>;
                            })}
                            {isActive
                                ? extraLetters.map((char, charId) => {
                                      return (
                                          <span
                                              key={char + charId}
                                              className="wrong extra">
                                              {char}
                                          </span>
                                      );
                                  })
                                : typedHistory[idx]
                                ? typedHistory[idx]
                                      .slice(wordList[idx].length)
                                      .split("")
                                      .map((char, charId) => {
                                          return (
                                              <span
                                                  key={char + charId}
                                                  className="wrong extra">
                                                  {char}
                                              </span>
                                          );
                                      })
                                : null}
                        </div>
                    );
                })}
            </div>
        </div>
    );
}