import * as React from "react";
import { TodoData } from "./TodoData";
import { TodoItem } from "./TodoItem";
import { Filter, FilterState } from "./Filter";

type Props = {
  items: TodoData[];
  onCheck: (item: TodoData, checked: boolean) => void;
};

export const TodoList = ({ items, onCheck }: Props) => {
  const [state, setState] = React.useState<FilterState>("All");

  const displayItems = items.filter((item) => {
    if (state === "All") return true;
    if (state === "Done" && item.done) return true;
    if (state === "Todo" && !item.done) return true;
    return false;
  });

  return (
    <>
      <Filter value={state} onChange={(key) => setState(key)} />
      {displayItems.map((item) => (
        <TodoItem key={item.key} item={item} onCheck={onCheck} />
      ))}
      <div className="panel-block">{displayItems.length} items</div>
    </>
  );
};