import { useState } from "react";
import { useConnect, useAccount, useDisconnect } from "wagmi";

export function ApexStyleButton({
  children,
  onClick,
}: React.PropsWithChildren<{
  onClick: () => void;
}>) {
  const [pd, setPd] = useState(false);
  const [pe, setPe] = useState(false);
  return (
    <button
      onClick={onClick}
      onPointerDown={() => {
        setPd(true);
      }}
      onPointerUp={() => {
        setPd(false);
      }}
      onPointerEnter={() => {
        setPe(true);
      }}
      onPointerOut={() => {
        setPe(false);
        setPd(false);
      }}
      style={{
        minWidth: "250px",
        borderRadius: "25px",
        display: "inline-flex",
        alignItems: "center",
        fontWeight: 700,
        background: pe || pd ? "hsl(237,94.2%,44.55%)" : "#363FF9",
        color: "#FFFFFF",
        boxShadow: !pd
          ? "0px 4px 0px hsl(237deg 94% 36%)"
          : "0px 0px 0px hsl(237deg 94% 36%)",
        padding: "8px 15px",
        justifyContent: "center",
        transform: pd ? "translateY(4px)" : "none",
        transition: "transform .1s, background .3s, box-shadow .1s",
      }}
    >
      {children}
    </button>
  );
}

export function ApexLogoButton({
  title,
  onClick,
}: {
  title: string;
  onClick: () => void;
}) {
  return (
    <ApexStyleButton onClick={onClick}>
      <img
        alt="apex-logo"
        width="35px"
        height="35px"
        style={{ display: "inline", marginRight: 5 }}
        src="https://gateway.pinata.cloud/ipfs/QmPgPhdwwiVPdZ7AdWJX2tajgZWNKJA8w12rNwPtr1PDvJ"
      ></img>
      {title}
    </ApexStyleButton>
  );
}

export function ApexConnectButton() {
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();
  const { isConnected, connector } = useAccount();
  const apexConnector = connectors.find((_) => _.id === "apex");

  async function connectClicked() {
    if (apexConnector === undefined) {
      console.error(
        "Couldn't find Apex wallet connector. Check your wallet configuration"
      );
      return;
    }
    const provider = await apexConnector.getProvider();
    if (provider === undefined) {
      console.log("Apex is not installed, going to the download page.");
      window.open(
        "https://chrome.google.com/webstore/detail/apex-wallet/oppceojapmdmhpnmjpballbbdclocdhj?utm_source=Marketing%20Site",
        "_blank"
      );
    } else {
      connect({ connector: apexConnector });
    }
  }

  if (!isConnected) {
    return (
      <ApexLogoButton title={"Connect via Apex"} onClick={connectClicked} />
    );
  } else {
    return (
      <ApexLogoButton
        title={`Disconnect from ${connector?.name}`}
        onClick={() => {
          disconnect();
        }}
      />
    );
  }
}