import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader } from "@/components/archive-ui";
import { LANGUAGE_LABEL, TYPE_LABEL } from "@/lib/archive/labels";
import { useArchiveStore } from "@/lib/archive/store";
import type { LanguageCode, MaterialType } from "@/lib/archive/types";

export const Route = createFileRoute("/submit")({
  component: SubmitPage,
});

const TYPES: MaterialType[] = ["pdf", "audio", "video", "photograph", "historical_document", "book", "letter", "article"];

function SubmitPage() {
  const add = useArchiveStore((state) => state.addSubmission);
  const [done, setDone] = useState("");
  const [error, setError] = useState("");
  const [title, setTitle] = useState("");
  const [contributor, setContributor] = useState("");
  const [description, setDescription] = useState("");
  const [externalLink, setExternalLink] = useState("");
  const [materialType, setMaterialType] = useState<MaterialType>("pdf");
  const [language, setLanguage] = useState<LanguageCode>("ar");

  return (
    <div>
      <PageHeader
        kicker="Community"
        title="Offer a record"
        lede="Books, recordings, photographs, letters, and written testimony start as pending. They are not answers until a curator approves them."
      />
      {done ? (
        <p className="border border-ink/15 bg-paper p-4">
          Received as pending review: {done}. It will not be used by the research desk until it is approved.
        </p>
      ) : (
        <form
          className="grid max-w-2xl gap-4"
          onSubmit={(event) => {
            event.preventDefault();
            if (title.trim().length < 3 || contributor.trim().length < 2 || description.trim().length < 40) {
              setError("Give a title, your name, and a description of at least a few sentences.");
              return;
            }
            setError("");
            const id = add({ title, contributor, description, externalLink, materialType, language });
            setDone(title.trim());
            setTitle("");
            setDescription("");
            setExternalLink("");
            void id;
          }}
        >
          <label className="grid gap-1 text-sm">
            Title
            <input value={title} onChange={(event) => setTitle(event.target.value)} className="min-h-11 border border-ink/20 bg-paper px-3" />
          </label>
          <label className="grid gap-1 text-sm">
            Your name
            <input value={contributor} onChange={(event) => setContributor(event.target.value)} className="min-h-11 border border-ink/20 bg-paper px-3" />
          </label>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-1 text-sm">
              Kind
              <select value={materialType} onChange={(event) => setMaterialType(event.target.value as MaterialType)} className="min-h-11 border border-ink/20 bg-paper px-3">
                {TYPES.map((item) => (
                  <option key={item} value={item}>{TYPE_LABEL[item]}</option>
                ))}
              </select>
            </label>
            <label className="grid gap-1 text-sm">
              Language
              <select value={language} onChange={(event) => setLanguage(event.target.value as LanguageCode)} className="min-h-11 border border-ink/20 bg-paper px-3">
                {(Object.keys(LANGUAGE_LABEL) as LanguageCode[]).map((item) => (
                  <option key={item} value={item}>{LANGUAGE_LABEL[item]}</option>
                ))}
              </select>
            </label>
          </div>
          <label className="grid gap-1 text-sm">
            What is it, and how do you know?
            <textarea value={description} onChange={(event) => setDescription(event.target.value)} rows={6} className="border border-ink/20 bg-paper px-3 py-2" />
          </label>
          <label className="grid gap-1 text-sm">
            Link, if the file lives elsewhere
            <input value={externalLink} onChange={(event) => setExternalLink(event.target.value)} className="min-h-11 border border-ink/20 bg-paper px-3" placeholder="https://" />
          </label>
          {error ? <p className="text-sm">{error}</p> : null}
          <button type="submit" className="min-h-11 justify-self-start bg-brass px-4 text-sm text-paper">
            Submit for review
          </button>
        </form>
      )}
    </div>
  );
}