// src/api/axios.js

// 카테고리 검색조건에 맞는 유기동물 데이터를 받아옵니다.
export const getPets = async (query) => {
  try {
    const data = await axios
      .get(
        `${BASE_URL}&SIGUN_NM=${query.SIGUN_NM}&PBLANC_BEGIN_DE=${query.PBLANC_BEGIN_DE}&PBLANC_END_DE=${query.PBLANC_END_DE}&SPECIES_NM=${query.SPECIES_NM}`,
        options
      )
      .then((res) =>
        res.data.AbdmAnimalProtect ? res.data.AbdmAnimalProtect : []
      );
    return data; //꼭 리턴 해주기
  } catch (err) {
    console.log(err.message);
  }

// 지도상에서 선택한 보호소에 상태가 보호중인 유기동물을 받아옵니다.    
export const getShelterPets = async (marker) => {
  try {
    const data = await axios
      .get(`${BASE_URL}&SHTER_NM=${marker.Gb}&STATE_NM=보호중`)
      .then((res) =>
        res.data.AbdmAnimalProtect ? res.data.AbdmAnimalProtect : []
      );
    return data; //꼭 리턴 해주기
  } catch (err) {
    console.log(err.message);
  }
};

// src/page/Home.js
//...
  useEffect(() => {
    getPets(query).then((data) => {
      setPets(data[1].row);
      setCount(data[0].head[0].list_total_count);
    });
  }, [query]);

//src/ context/LikeContext.js

import { createContext, useContext, useEffect, useState } from "react";

const LikesContext = createContext();

// likes에는 id만 저장해서 include로 판단하고, api에서 id로 따로 불러올 수 없어서 pet까지 로컬에 저장함
export function LikesProvider({ children }) {
  const [likes, setLikes] = useState(readLikesFromLocal("likes"));
  const [likeItems, setLikeItems] = useState(readLikesFromLocal("likeItems"));

  const handleAdd = (id, pet) => {
    setLikes({ ...likes, id });
    setLikeItems([...likeItems, pet]);
  };

  const handleDelete = (id) => {
    setLikes(likes.filter((item) => item !== id));
    setLikeItems(likeItems.filter((item) => item.ABDM_IDNTFY_NO !== id));
  };

  // 처음 들어왔을때 로컬로 부터 읽고 나서 이걸 바로 로컬에 넣어줘야 한다. 그리고 set도 해줘야 한다.
  useEffect(() => {
    localStorage.setItem("likes", JSON.stringify(likes));
    localStorage.setItem("likeItems", JSON.stringify(likeItems));
    setLikes(JSON.parse(localStorage.getItem("likes")));
    setLikeItems(JSON.parse(localStorage.getItem("likeItems")));
  }, []);

  return (
    <LikesContext.Provider
      value={{ likes, likeItems, handleAdd, handleDelete }}
    >
      {children}
    </LikesContext.Provider>
  );
}

function readLikesFromLocal(key) {
  const likes = localStorage.getItem(key);
  return likes ? JSON.parse(likes) : [];
}

export const useLikes = () => useContext(LikesContext);

//src/ components/Like.

const { likes, handleAdd, handleDelete } = useLikes();
  const [like, setLike] = useState(() => {
    if (likes.includes(pet)) {
      console.log("포함");
      return true;
    } else {
      console.log("안포함");
      return false;
    }
  });

  const toggleLike = () => {
    setLike((prev) => !prev);
    if (like) {
      handleDelete(pet);
    } else {
      handleAdd(pet);
    }
  };

  useEffect(() => {
    localStorage.setItem("likes", JSON.stringify(likes));
  }, [likes]); 

//src/page/Location.jsx
//...
kakao.maps.event.addListener(marker, "click", function () {
       setShelter(marker.Gb);
       getShelterPets(shelter).then((data) => {
         setPets(data.length === 0 ? [] : data[1].row);
         setCount(data.length === 0 ? "0" : data[0].head[0].list_total_count);
       });
     });
   }
 }, []);