import { useState } from "react";
type Lesson = { id: string; title: string; done: boolean };
const initial: Lesson[] = [
  { id: "html", title: "HTML 表单", done: false },
  { id: "css", title: "CSS 布局", done: true },
];
export default function App() {
  const [lessons, setLessons] = useState<Lesson[]>(initial);
  const [draft, setDraft] = useState("");
  const [query, setQuery] = useState("");
  const [onlyPending, setOnlyPending] = useState(false);
  const [error, setError] = useState("");
  const word = query.trim().toLocaleLowerCase();
  const visible = lessons.filter(item => (!onlyPending || !item.done) &&
    item.title.toLocaleLowerCase().includes(word));
  function add() {
    const title = draft.trim();
    if (!title) { setError("请输入学习内容"); return; }
    setLessons(current => [...current, { id: crypto.randomUUID(), title, done: false }]);
    setDraft("");
    setError("");
  }
  function toggle(id: string) {
    setLessons(current => current.map(item =>
      item.id === id ? { ...item, done: !item.done } : item));
  }
  return <main>
    <h1>学习记录板</h1>
    <form onSubmit={event => { event.preventDefault(); add(); }}>
      <label htmlFor="draft">学习内容</label>
      <input id="draft" type="text" maxLength={80} value={draft}
        onChange={event => setDraft(event.target.value)}
        aria-describedby={error ? "input-error" : undefined} />
      <button type="submit">添加</button>
    </form>
    {error && <p id="input-error" className="error" role="alert">{error}</p>}
    <div className="filters">
      <label>搜索标题<input type="text" value={query}
        onChange={event => setQuery(event.target.value)} /></label>
      <label><input type="checkbox" checked={onlyPending}
        onChange={event => setOnlyPending(event.target.checked)} />只看待学</label>
    </div>
    <p role="status">显示 {visible.length} 项，待学 {lessons.filter(item => !item.done).length} 项</p>
    {visible.length === 0 ? <p>没有匹配的记录</p> : <ul>
      {visible.map(item => <li key={item.id}><label>
        <input type="checkbox" checked={item.done} onChange={() => toggle(item.id)} />
        <span>{item.title}（{item.done ? "已学" : "待学"}）</span>
      </label></li>)}
    </ul>}
  </main>;
}