import {useEffect, useState} from "react";
import client from "../../api";
import ListItem from "../ListItem";
import styles from "./style.module.scss";
import {Photo} from "../../types";
import {useParams} from "react-router";
import Modal from "../Modal";
import Search from "../Search";

export default function List() {
  const {id: currentId} = useParams();

  const [photos, setPhotos] = useState<Photo[]>([]);

  if (!photos.length) {
    return (
      <div>loading</div>
    )
  }

  useEffect(() => {
    client
      .getPhotos()
      .then(setPhotos);
  }, [photos]);

  const onFilter = (filtered: Photo[]) => {
    setPhotos(filtered);
  }

  return (
    <>
      {currentId && (
        <Modal photoId={currentId} />
      )}

      <Search onFilter={onFilter} />

      <div className={styles.list}>
        {photos.map(photo => (
          <ListItem {...photo} />
        ))}
      </div>
    </>
  )
}