const DashboardContainer = () => {
  const { state } = useContext(SpotifyDataContext);
  const windowWidth = useWindowSize();

  return (
    <Dashboard>
      <Header />
      <div className="body" id="body">
        {windowWidth.width > 900 ? <Sidebar /> : null}

        <ContentWrapper>
          <TimerangeBar></TimerangeBar>
          {windowWidth.width < 900 ? <MobileSidebar /> : null}

          {/* This KEY seems like a hack. However i didn't manage to find another way.*/}
          <Content type={state.type} timeperiod={state.timeperiod} key={state.type} />
        </ContentWrapper>
      </div>
    </Dashboard>
  );
};



const Content = ({ type, timeperiod }) => {
  const { spotifyData } = useTopTracksAndArtists(type, timeperiod);

  console.log(spotifyData);

  const renderContent = () => {
    if (spotifyData !== null) {
      return spotifyData.items.map((item, index) => {
        return (
          <ContentItem key={item.id}>
            <ItemImg imgUrl={type === "tracks" ? item.album.images : item.images} index={index + 1}></ItemImg>

            <ItemDetails
              redirect={item.external_urls.spotify}
              artist={type === "tracks" ? item.artists[0].name : ""}
              title={item.name}
              popularity={item.popularity}
              index={index + 1}
            />
          </ContentItem>
        );
      });
    } else {
      return <Loader />;
    }
  };

  return (
    <>
      <div className="content__title">TOP {type === "tracks" ? "TRACKS" : "ARTISTS"}</div>
      <ContentList>{<Loader />}</ContentList>
    </>
  );
};



const useTopArtistsAndTracks = (type, time_range) => {
  const [data, setData] = useState({
    spotifyData: null,
    loading: true,
  });

  const TokenContext = useContext(context);

  useEffect(() => {
    const getData = async () => {
      try {
        setData({ spotifyData: null, loading: true });
        const response = await Axios.get(
          `https://api.spotify.com/v1/me/top/${type}?limit=50&offset=0&time_range=${time_range}`,
          {
            headers: {
              Authorization: `Bearer ${TokenContext.token}`,
            },
          }
        );

        setData({ spotifyData: response.data, loading: false });
      } catch (err) {
        console.error(err);
        Cookies.remove("token");
      }
    };

    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type, time_range]);

  return data;
};