import { ArrowDownIcon } from "@src/assets/icons";
import { Modal } from "@src/components/Modal";
import { useSwapContext } from "@src/context";
import { Chain } from "@src/models";
import { useCallback, useEffect, useState } from "react";
import { useAccount } from "wagmi";
import { SwapPanelType } from "../../../SwapView";
import { ChainPicker } from "./ChainPicker";

type Props = {
  chain: Chain | undefined;
  type: SwapPanelType;
};

export const ChainPanel = ({ chain, type }: Props) => {
  const {
    supportedChains,
    srcChain,
    setSrcChain,
    setDstChain,
    srcToken,
    setSrcToken,
    dstToken,
    setDstToken,
  } = useSwapContext();

  const { chainId } = useAccount();

  const [chainPickerModalOpen, setChainPickerModalOpen] = useState(false);

  // select chain from user wallet
  useEffect(() => {
    if (!chainId) return;

    const userChainFromWallet = supportedChains.find(
      (chain) => chain.chainId === String(chainId),
    );
    if (
      !userChainFromWallet ||
      srcChain?.chainId === userChainFromWallet.chainId
    )
      return;

    setSrcChain(userChainFromWallet);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chainId]);

  const handleSrcChainChange = useCallback(
    (chain: Chain) => {
      const newSrcToken =
        chain.tokens.find((token) => token.symbol === srcToken?.symbol) ||
        chain.tokens.find((token) => token.symbol === chain.tokenSymbol);
      setSrcChain(chain);
      setSrcToken(newSrcToken);
    },
    [setSrcChain, setSrcToken, srcToken],
  );

  const handleDstChainChange = useCallback(
    (chain: Chain) => {
      const newDstToken =
        chain.tokens.find((token) => token.symbol === dstToken?.symbol) ||
        chain.tokens.find((token) => token.symbol === chain.tokenSymbol);
      setDstChain(chain);
      setDstToken(newDstToken);
    },
    [setDstChain, setDstToken, dstToken],
  );

  return (
    <>
      {chainPickerModalOpen && (
        <Modal onClose={() => setChainPickerModalOpen(false)}>
          <ChainPicker
            type={type}
            supportedChains={supportedChains}
            setSrcChain={handleSrcChainChange}
            setDstChain={handleDstChainChange}
            onClose={() => setChainPickerModalOpen(false)}
          />
          ,
        </Modal>
      )}

      <button
        type="button"
        onClick={() => setChainPickerModalOpen(true)}
        className="w-full max-w-[40%]"
      >
        <div className="flex justify-between items-center p-4 gap-0 sm:gap-8">
          <div className="flex flex-col font-medium items-start overflow-hidden">
            <p className="text-xs opacity-60">
              {type === "source" ? "From:" : "To:"}
            </p>
            <p
              className={`${
                chain
                  ? "whitespace-nowrap overflow-hidden text-ellipsis max-w-full"
                  : "opacity-60"
              }`}
            >
              {chain ? chain.displayName : "Select"}
            </p>
          </div>
          <div className="w-4 h-2 fill-t_text_primary">
            <ArrowDownIcon />
          </div>
        </div>
      </button>
    </>
  );
};