import { React } from "../deps.ts";
import useDownloadFormState from "../hooks/use-download-form-state.ts";
import { downloadVoca } from "../pdf.ts";

export default function DownloadForm() {
  const {
    levelState: [levels, setLevels],
    dayState: [day, setDay],
    save,
  } = useDownloadFormState();
  const [formEnable, setFormEnable] = React.useState<boolean>(true);

  const handleDownload: React.FormEventHandler = React.useCallback((ev) => {
    const button = ev.target as HTMLButtonElement;
    save({ levels, day });
    setFormEnable(false);
    downloadVoca(
      levels.sort(),
      day,
      button.id === "testDownload" ? "TEST" : "LIST",
    ).then(
      () => {
        setFormEnable(true);
      },
    );
    ev.preventDefault();
  }, [levels, day]);

  const handleDayChange: React.FormEventHandler<HTMLSelectElement> = (ev) => {
    const select = ev.target as HTMLSelectElement;
    setDay(Number.parseInt(select.value));
  };

  const handleLevelChange: React.FormEventHandler<HTMLInputElement> = (ev) => {
    const checkbox = ev.target as HTMLInputElement;
    if (checkbox.checked) {
      setLevels((prev) => [...prev, Number.parseInt(checkbox.value)]);
    } else {
      setLevels((prev) =>
        prev.filter((val) => val !== Number.parseInt(checkbox.value))
      );
    }
  };

  return (
    <>
      <fieldset disabled={!formEnable}>
        <legend>시험 난이도</legend>
        <div>
          <input
            type="checkbox"
            id="10"
            value="10"
            checked={levels.find((val) => val === 10) !== undefined}
            onChange={handleLevelChange}
          />
          <label htmlFor="10">전체 난이도</label>
        </div>
        <div>
          <input
            type="checkbox"
            id="6"
            value="6"
            checked={levels.find((val) => val === 6) !== undefined}
            onChange={handleLevelChange}
          />
          <label htmlFor="6">입문반(550+), 기본반(650+)</label>
        </div>
        <div>
          <input
            type="checkbox"
            id="7"
            value="7"
            checked={levels.find((val) => val === 7) !== undefined}
            onChange={handleLevelChange}
          />
          <label htmlFor="7">중급반(750+)</label>
        </div>
        <div>
          <input
            type="checkbox"
            id="8"
            value="8"
            checked={levels.find((val) => val === 8) !== undefined}
            onChange={handleLevelChange}
          />
          <label htmlFor="8">정규반(850+)</label>
        </div>
        <div>
          <input
            type="checkbox"
            id="9"
            value="9"
            checked={levels.find((val) => val === 9) !== undefined}
            onChange={handleLevelChange}
          />
          <label htmlFor="9">실전반(900+)</label>
        </div>
      </fieldset>

      <div>
        <label htmlFor="day">범위</label>
        <select
          id="day"
          value={day}
          onChange={handleDayChange}
          disabled={!formEnable}
        >
          {[...Array(30)].map((_, i) => <option value={i + 1}>{i + 1}</option>)}
        </select>
      </div>

      <div>
        <button
          id="testDownload"
          disabled={!formEnable}
          onClick={handleDownload}
        >
          문제 다운로드
        </button>

        <button
          id="listDownload"
          disabled={!formEnable}
          onClick={handleDownload}
        >
          단어장 다운로드
        </button>
      </div>
    </>
  );
}
