// islands/QuizConfigure.tsx
import { useEffect, useState } from "preact/hooks";
import { QuizConfig } from "../utils/types.ts";
import { User } from "../db/interfaces.ts";

export interface QuizConfigProps {
  quizConfig: QuizConfig;
  // kvObj: KvObj<QuizConfig>;
  quizOrder: { index: number; slots: string[] };
  quizMode: string;
}

export default function QuizConfigure(
  { quizConfig, quizOrder, quizMode }: QuizConfigProps,
) {
  // Theme classes are defined in styles.css with @media (prefers-color-scheme: dark)

  const [thisQuizConfig, setQuizConfig] = useState<QuizConfig>(quizConfig);
  const [orderedQuizStr, setOrderQuizStr] = useState<string>(
    JSON.stringify(thisQuizConfig),
  );
  const [thisQuizConfigStr, setQuizConfigStr] = useState<string>(
    JSON.stringify({
      theUpdate: null,
      quiz: quizConfig,
      //kvObj: kvObj,
      quizOrder: quizOrder,
    }),
  );
  const [selectedSlot, setSelectedSlot] = useState(0);
  //const [changeMode, setChangeMode] = useState<{ mode: string } | null>(null);
  const [nameError, setNameError] = useState(false);
  const [thisQuizOder, setThisQuizOrder] = useState(quizOrder);
  const [randomOrder, setRandomOrder] = useState(true);
  const [modeType, setModeType] = useState(quizMode);
  //const [isLoading, setIsLoading] = useState(true);

  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prev) => {
      const newCount = prev + 1;
      return newCount;
    });
  };

  // const handleQuizNameChange = (e: Event) => {
  //   const target = e.target as HTMLInputElement;
  //   if (!target.value) {
  //     setNameError(true);
  //   } else {
  //     thisQuizConfig.quiz_name = target.value;
  //     setQuizConfig(thisQuizConfig);
  //     setChangeMode((prev) => {
  //       if (!prev) {
  //         return { mode: "quiz" };
  //       }
  //
  //
  //
  //       return prev;
  //     });
  //   }
  //   setQuizConfigStr(
  //     JSON.stringify({
  //       theUpdate: changeMode?.mode,
  //       quiz: thisQuizConfig,
  //       kvObj: kvObj,
  //       quizOrder: thisQuizOder,
  //     }),
  //   );
  // };

  const handleQuizModeChange = (e: Event) => {
    const target = e.target as HTMLSelectElement;
    // setQuizConfig((prev) => {
    //   if (!prev) return null;
    //   const updated = { ...prev, quiz_mode: target.value };
    //   //saveQuizConfig(updated); // Save the updated config
    //   return updated;
    // });
  };

  if (!thisQuizConfig) {
    return <div>Error: Unable to load quiz configuration</div>;
  }

  function handleOwnerChange(
    event: Event,
    selectedUser: User | undefined,
  ): void {
    if (selectedUser) {
      //("selected       ", selectedUser.id);
      thisQuizConfig.owner_id = selectedUser.id;
      setQuizConfig(thisQuizConfig);
      //console.log("thisQuizConfig ", thisQuizConfig.owner_id);
    }
    //console.log("on user change ", JSON.stringify(event));
    //throw new Error("Function not implemented.");
  }

  useEffect(() => {
    //console.log("setting mode!!",quizConfig.quiz_mode)
    if (quizConfig.quiz_mode) {
      setModeType(quizConfig.quiz_mode);
    }
  }, []);

  return (
    <>
      <div
        className={`theme-container p-2 sm:p-3 md:p-4 rounded-lg shadow-md max-w-md mx-auto w-full overflow-auto`}
      >
        <div hidden>
          <button onClick={handleClick}>Increment</button>
          <p>Count: {count}</p>
        </div>
        <div className="flex space-x-2 pb-[10px]">
          <form
            action="/language/quizzing"
            method="POST"
            //onSubmit={handleLaunchQuiz}
            className="w-[300px] mx-0 px-0"
          >
            <input
              type="hidden"
              name="quizConfigData"
              value={thisQuizConfigStr}
            />

            <input
              type="hidden"
              name="quizData"
              value={orderedQuizStr}
            />
            <input
              type="hidden"
              name="randomValue"
              value={`${randomOrder}`}
            />
            <input
              type="hidden"
              name="modeValue"
              value={modeType}
            />
            <div className="fixed right-10 top-10 ">
              <div className="mb-4 flex justify-end items-center">
                <div className="flex flex-col items-end">
                  <button
                    type="submit"
                    className={`theme-button px-4 py-2 rounded`}
                    title="Start"
                  >
                    Launch
                  </button>
                  <label
                    htmlFor="randomOrderId"
                    className={`theme-text mb-1 pt-3 text-sm`}
                  >
                    Random Order
                  </label>
                  <input
                    id="randomOrderId"
                    type="checkbox"
                    checked={randomOrder}
                    onChange={(e) =>
                      setRandomOrder((e.target as HTMLInputElement).checked)}
                    className="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                </div>
              </div>
            </div>
            <div className="flex items-center ">
              <label htmlFor="modeSelect" className={`block mr-2 theme-text`}>
                Mode
              </label>
              <select
                id="modeSelect"
                value={modeType}
                onChange={(e) =>
                  setModeType((e.target as HTMLSelectElement).value)}
                className={`theme-select w-36`}
              >
                <option className="text-black" value="photo-see-bisaya">
                  Photo, See Bisaya
                </option>
                <option className="text-black" value="photo-see-english">
                  Photo, See English
                </option>
                <option className="text-black" value="photo-hide-bisaya">
                  Photo, Hide Bisaya
                </option>
                <option className="text-black" value="photo-hide-english">
                  Photo, Hide English
                </option>
                <option className="text-black" value="blank-see-bisaya">
                  Blank, See Bisaya
                </option>
                <option className="text-black" value="blank-see-english">
                  Blank, See English
                </option>
              </select>
            </div>
          </form>
        </div>
        <h2 className={`text-2xl font-bold mb-4 theme-text`}>Study Quiz</h2>
        <div className="w-[300px] mx-0 px-0 pb-[12px] mb-[12px]">
          <label
            className={`font-semibold text-left truncate w-full theme-text`}
          >
            {"Question count: " + thisQuizConfig.questions.length}
          </label>
        </div>
      </div>
      <div class="fixed bottom-4 inset-x-0 flex justify-center z-40 pointer-events-none">
        <button
          onClick={() => {
            localStorage.setItem("lock-route", "/language/dashboard");
            globalThis.location.href = "/language/dashboard";
          }}
          type="button"
          class={`w-11/12 max-w-md theme-button font-semibold py-3 px-10 rounded-full shadow-lg pointer-events-auto text-center`}
        >
          Back to dashboard
        </button>
      </div>
    </>
  );
}