import { DotGreenIcon, HelpIcon } from "@src/assets/icons";
import { Tooltip } from "@src/components";
import { useSwapContext } from "@src/context";
import { Chain } from "@src/models";
import { useMemo, useRef } from "react";
import { SwapPanelType } from "../../../../../SwapView";

type Props = {
  chain: Chain;
  type: SwapPanelType;
  disabledChain?: string;
  onClick: (chainId: string) => void;
};
export const ChainItem = ({ chain, type, disabledChain, onClick }: Props) => {
  // todo check useModal, we could improve this part to have the react state here, right now this line throws an error
  // const { address, chainId } = useAccount();

  const tooltipTriggerRef = useRef<SVGSVGElement>(null);

  const { srcChain, dstChain } = useSwapContext();
  const currentChainId = useMemo(
    () => (type === "source" ? srcChain?.chainId : dstChain?.chainId),
    [dstChain, srcChain, type],
  );

  const connected = false; //address && chainId?.toString() === chain.chainId;

  return (
    <div
      onClick={() => {
        if (chain.chainId === disabledChain) {
          return;
        }
        onClick(chain.chainId);
      }}
      className={`flex justify-between gap-3 mt-2 mb-2 border border-solid border-transparent cursor-pointer p-4 hover:selected-chain-item ${
        currentChainId === chain.chainId
          ? "selected-chain-item"
          : "bg-t_bg_primary"
      } ${
        chain.chainId === disabledChain
          ? "disabled-chain-item cursor-default"
          : ""
      }`}
    >
      <div className="flex gap-3 items-center w-full">
        <img src={chain.image} alt={chain.name} className="w-[34px] h-[34px]" />
        <p className="text-t_text_primary">{chain.displayName}</p>
      </div>

      {connected && (
        <div className="flex items-center gap-1">
          <DotGreenIcon />
          <div className="text-t_text_green">connected</div>
        </div>
      )}
      {chain.chainId === disabledChain && (
        <div className="flex items-center gap-1">
          <Tooltip
            text="Transfers between same chain not available"
            position="BOTTOM"
            triggerRef={tooltipTriggerRef}
            id="transfers-between-same-chains-tooltip"
          />

          <HelpIcon
            ref={tooltipTriggerRef}
            className="cursor-help fill-t_theme_color w-[18px] h-[18px]"
          />
        </div>
      )}
    </div>
  );
};