import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState, useEffect, useCallback } from "react";
import { Button } from "./Button/Button.js";
import { ButtonGroup } from "./Button/ButtonGroup.js";
import { Card } from "./vendor/Card/Card.js";
import "@netlify/ui";
import { CardTitle } from "./vendor/Card/CardTitle.js";
import { useNetlifySDK } from "../use_netlify_sdk.js";
const ProviderAuthCard = () => {
  const sdk = useNetlifySDK();
  const [isLoading, setIsLoading] = useState(false);
  const [isConfirmingDisconnect, setIsConfirmingDisconnect] = useState(false);
  const isConnected = sdk.context.auth.providerToken !== null;
  useEffect(() => {
    setIsConfirmingDisconnect(false);
    setIsLoading(false);
  }, [isConnected, setIsLoading, setIsConfirmingDisconnect]);
  const onClickConnect = useCallback(() => {
    setIsLoading(true);
    void sdk.beginProviderAuthFlow();
  }, [setIsConfirmingDisconnect]);
  const onClickDisconnect = useCallback(() => {
    setIsConfirmingDisconnect(true);
  }, [sdk, setIsLoading]);
  const onConfirmDisconnect = useCallback(() => {
    setIsLoading(true);
    void sdk.disconnectProviderAuth();
  }, [setIsLoading]);
  const onCancelDisconnect = useCallback(() => {
    setIsConfirmingDisconnect(false);
  }, [setIsConfirmingDisconnect]);
  return /* @__PURE__ */ jsxs(Card, { children: [
    /* @__PURE__ */ jsxs(CardTitle, { children: [
      "Your Netlify account is ",
      isConnected ? "" : "not ",
      "connected to",
      " ",
      sdk.extension.name
    ] }),
    /* @__PURE__ */ jsxs(ButtonGroup, { className: "tw-mt-4", children: [
      !isConnected && /* @__PURE__ */ jsx(Button, { onClick: onClickConnect, loading: isLoading, children: isLoading ? "Connecting" : "Connect" }),
      isConnected && !isConfirmingDisconnect && /* @__PURE__ */ jsx(Button, { onClick: onClickDisconnect, children: "Disconnect" }),
      isConnected && isConfirmingDisconnect && /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            onClick: onConfirmDisconnect,
            loading: isLoading,
            variant: "danger",
            children: "Confirm Disconnect"
          }
        ),
        /* @__PURE__ */ jsx(
          Button,
          {
            disabled: isLoading,
            onClick: onCancelDisconnect,
            level: "secondary",
            children: "Cancel"
          }
        )
      ] })
    ] })
  ] });
};
export {
  ProviderAuthCard
};
//# sourceMappingURL=ProviderAuthCard.js.map
