//Module Imports
import React from "react";
import axios from "axios";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
//Local Imports
import StashBoard from "./stash/StashBoard";
import { api } from "./config.json";

const getCairoApiInstance = (cairoAuthToken) =>
  axios.create({
    headers: { Authorization: `Bearer ${cairoAuthToken}` },
  });

class Stash extends React.Component {
  constructor(props) {
    super(props);
    const urlSearchParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlSearchParams.entries());
    this.state = { cairoApi: null };
    if (params.cairoAuthToken) this.setLocalToken(params.cairoAuthToken);
  }

  componentDidMount() {
    this.verifyLocalToken();
  }

  verifyLocalToken() {
    const token = localStorage.getItem("cairoAuthToken");
    axios
      .get(api.cairo.verify, { headers: { authorization: `Bearer ${token}` } })
      .then(() => this.setState({ cairoApi: getCairoApiInstance(token) }))
      .catch(() =>
        window.location.replace(
          `${api.cairo.login}?redirectUri=${window.location.href}`
        )
      );
  }

  setLocalToken(cairoAuthToken) {
    localStorage.setItem("cairoAuthToken", cairoAuthToken);
    window.history.replaceState({}, document.title, "/");
  }

  render() {
    return (
      <>
        <ToastContainer
          position="top-right"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick={true}
          rtl={false}
          limit={3}
          pauseOnFocusLoss
          draggable
          pauseOnHover={false}
        />
        {this.state.cairoApi && <StashBoard cairoApi={this.state.cairoApi} />}
      </>
    );
  }
}

export default Stash;