import { Space } from "antd";
import Axios from "axios";
import queryString from "query-string";
import { useEffect } from "react";
import { useCookies } from "react-cookie";
import { useLocation, useNavigate } from "react-router-dom";
import QboSignIn from "../../assets/qbo/C2QB_green_btn_med_default.svg";
import { logImEXEvent } from "../../firebase/firebase.utils";

export default function QboAuthorizeComponent() {
  const location = useLocation();
  const history = useNavigate();
  const [setCookie] = useCookies(["access_token", "refresh_token"]);

  const handleQbSignIn = async () => {
    logImEXEvent("qbo_sign_in_clicked");
    const result = await Axios.post("/qbo/authorize");
    window.location.href = result.data;
  };
  const qs = queryString.parse(location.search);

  const { error } = qs;

  useEffect(() => {
    const { code, state, realmId } = qs;
    const hasBeenCalledBack = code && realmId && state;

    if (hasBeenCalledBack) {
      // setCookie("qbo_code", code, { path: "/" });
      // setCookie("qbo_state", state, { path: "/" });

      // let expires = new Date();
      // expires.setTime(expires.getTime() + 8726400 * 1000);

      // setCookie("qbo_realmId", realmId, {
      //   path: "/",
      //   expires,

      //   ...(process.env.NODE_ENV !== "development"
      //     ? { domain: `.${window.location.host}` }
      //     : {}),
      // });

      history({ pathname: `/manage/accounting/receivables` });
    }
  }, [qs, location, setCookie]);

  return (
    <Space>
      <img onClick={handleQbSignIn} alt="Sign In to QuickBooks Online" src={QboSignIn} style={{ cursor: "pointer" }} />

      {error && JSON.parse(decodeURIComponent(error)).error_description}
    </Space>
  );
}