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

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

  const handleQbSignIn = async () => {
    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.push({ pathname: `/manage/accounting/receivables` });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [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>
  );
}
