import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useCallback } from "react";
import styled, { useTheme } from "styled-components";
import { t } from "ttag";
import { shortString } from "@equilab/utils/lib/format";
import Button from "../../../button";
import WalletButton from "../wallet-button";
const Wrapper = styled.div `
  display: flex;
  align-items: center;

  .ui-dex-nav-connect-button {
    margin-right: 8px;
  }

  .ui-nav-wallet-btn,
  ui-nav-wallet-btn__inner {
    border: none;
    background: #ffffff;
    box-shadow: unset;
  }
`;
const ConnectWalletButton = ({ toggleWallet, active, useAccounts, }) => {
    const theme = useTheme();
    const { connected, account, connect } = useAccounts();
    const [status, setStatus] = useState("connect");
    const [buttonLabel, setButtonLabel] = useState(t `Connect wallet`);
    const [buttonPending, setButtonPending] = useState(false);
    useEffect(() => {
        if (status === "connect" && connected) {
            setStatus("account");
            setButtonPending(false);
        }
    }, [connected]);
    useEffect(() => {
        if (status === "account" && !!account && !!account.address) {
            setButtonLabel(shortString(account.address, 10, "infix"));
        }
    }, [status, account]);
    const handleButtonClick = useCallback(async (e) => {
        e.stopPropagation();
        if (status === "connect") {
            setButtonPending(true);
            try {
                await connect();
            }
            catch (e) {
                console.error(e);
            }
            setButtonPending(false);
        }
        else if (status === "account" && theme.flags?.isCurve) {
            toggleWallet?.();
        }
    }, [connect, status, toggleWallet, theme.flags]);
    return (_jsxs(Wrapper, { className: "ui-dex-nav-connect-button-wrapper", children: [_jsx(Button, { alternative: !active, theme: { button: { ...theme.button, alterBackground: "#ffffff" } }, onClick: handleButtonClick, pending: buttonPending, className: `ui-dex-nav-connect-button`, size: "xs", width: "177px", children: buttonLabel }), status === "account" && !theme.flags?.isCurve && (_jsx(WalletButton, { toggleWallet: toggleWallet }))] }));
};
export default ConnectWalletButton;
//# sourceMappingURL=index.js.map