import { ArrowRightLeftIcon } from "lucide-react"
import { useTheme } from "next-themes"
import { useAccount, useSwitchChain } from "wagmi"
import { getNetworkColor } from "~~/hooks/xchange-create"
import { getTargetNetworks } from "~~/utils/xchange"

const allowedNetworks = getTargetNetworks()

type NetworkOptionsProps = {
  hidden?: boolean
}

export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
  const { switchChain } = useSwitchChain()
  const { chain } = useAccount()
  const { resolvedTheme } = useTheme()
  const isDarkMode = resolvedTheme === "dark"

  return (
    <>
      {allowedNetworks
        .filter(allowedNetwork => allowedNetwork.id !== chain?.id)
        .map(allowedNetwork => (
          <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
            <button
              className="menu-item btn-sm flex gap-3 whitespace-nowrap !rounded-xl py-3"
              type="button"
              onClick={() => {
                switchChain?.({ chainId: allowedNetwork.id })
              }}
            >
              <ArrowRightLeftIcon className="ml-2 h-6 w-4 sm:ml-0" />
              <span>
                Switch to{" "}
                <span
                  style={{
                    color: getNetworkColor(allowedNetwork, isDarkMode),
                  }}
                >
                  {allowedNetwork.name}
                </span>
              </span>
            </button>
          </li>
        ))}
    </>
  )
}