import React from "react";
import { useQuery } from "react-query";
import axios from "axios";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { Container } from "@chakra-ui/react";

import Search from "./Search";
import Player from "./Player";
import Statistic from "./Statistic";

const App = () => {
  const statistics = useQuery(
    "statistics",
    async () => {
      const { data } = await axios.get("/api/statistics");
      return data;
    },
    {
      placeholderData: [],
    }
  );

  const players = useQuery(
    "players",
    async () => {
      const { data } = await axios.get("/api/players");
      return data;
    },
    {
      placeholderData: [],
    }
  );

  return (
    <Container>
      <BrowserRouter>
        <Switch>
          <Route
            path="/statistic/:type/:name"
            render={(routeProps) => (
              <Statistic
                type={routeProps.match.params.type}
                name={routeProps.match.params.name}
                players={players.data}
              />
            )}
          />
          <Route
            path="/player/:id"
            render={(routeProps) => (
              <Player
                playerId={routeProps.match.params.id}
                players={players.data}
              />
            )}
          />
          <Route>
            <Search statistics={statistics.data} players={players.data} />
          </Route>
        </Switch>
      </BrowserRouter>
    </Container>
  );
};

export default App;