import { useClickAway } from "@uidotdev/usehooks";
import { AnimatePresence, motion } from "framer-motion";
import React, { type MutableRefObject, useState } from "react";

import { Tooltip } from "@components/common/Tooltip";
import { useTheme } from "../../hooks/useTheme";
import type { Chain } from "../../store/globalSlice";
import { getBorderRadius } from "../../utils/getBorderRadius";
import { MIcon } from "../common/MIcon";
import { TokenIcon } from "../common/TokenIcon";

export const NetworkButton = ({
	onClick,
	url,
	active,
	networkName,
}: {
	onClick: () => void;
	url: string;
	active: boolean;
	networkName: string;
}) => {
	const theme = useTheme();
	return (
		<Tooltip content={networkName}>
			<button
				type="button"
				onClick={onClick}
				// biome-ignore format:
				className={`bn-cursor-pointer bn-mr-1.5 bn-w-[37.8px] bn-h-[37.8px] bn-flex bn-items-center bn-justify-center bn-shrink-0 bn-border bn-border-solid ${
					active
					? "bn-bg-accent bn-border-accent"
					: "bn-bg-layer-2 bn-border-transparent"
				}`}
				style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
			>
				<TokenIcon url={url} classNames="bn-w-[22px] bn-h-[22px]" />
			</button>
		</Tooltip>
	);
};

export const MoreChainsDropdown = ({
	chains,
	setActiveNetwork,
}: {
	chains: Chain[];
	setActiveNetwork: (value: number) => void;
}) => {
	const theme = useTheme();
	const [showDropdown, setShowDropdown] = useState<boolean>(false);

	const ref = useClickAway(() => {
		setShowDropdown(false);
	}) as MutableRefObject<HTMLDivElement>;

	return (
		<div className="bn-w-[37.8px] bn-h-[37.8px] bn-relative bn-flex-1" ref={ref}>
			<button
				type="button"
				className="bn-cursor-pointer bn-w-full bn-h-full bn-flex bn-items-center bn-justify-evenly bn-bg-layer-2 bn-shrink-0 bn-border-none bn-text-secondary bn-py-0 bn-px-1.5 bn-flex-nowrap bn-overflow-hidden"
				style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
				onClick={() => setShowDropdown(!showDropdown)}
			>
				{/* <FourSquareIcon /> */}
				<MIcon name="keyboard_arrow_down" />
			</button>
			<AnimatePresence>
				{showDropdown && (
					<motion.div
						className="bn-bg-layer-2 bn-px-3 bn-py-2.5 bn-w-[200px] bn-z-10 bn-absolute bn-right-0 bn-top-[46px] bn-max-h-[300px] bn-overflow-y-auto"
						initial={{ opacity: 0, y: 10 }}
						animate={{ opacity: 1, y: 0 }}
						exit={{ opacity: 0, y: 10 }}
						style={{ borderRadius: getBorderRadius(theme.borderRadius, 5) }}
					>
						{chains.map((item) => (
							<NetworkItem
								chain={item}
								key={item.chainId}
								onClick={() => {
									setActiveNetwork(item.chainId);
									setShowDropdown(false);
								}}
							/>
						))}
					</motion.div>
				)}
			</AnimatePresence>
		</div>
	);
};

const NetworkItem = ({
	onClick,
	chain,
}: {
	onClick: () => void;
	chain: Chain;
}) => {
	return (
		<button
			type="button"
			onClick={onClick}
			className="bn-bg-transparent bn-flex bn-items-center bn-p-2 bn-cursor-pointer bn-w-full bn-border-none"
		>
			<TokenIcon url={chain.icon} classNames="bn-w-5 bn-h-5 bn-mr-2" />
			<span className="bn-text-primary bn-font-medium bn-text-sm">{chain.name}</span>
		</button>
	);
};

const FourSquareIcon = () => {
	const colors = ["#FFD698", "#FF9875", "#8AE8B6", "#AE9FF9"];
	return (
		<div className="bn-size-[26px] bn-rounded bn-bg-layer-3 bn-p-[5px] bn-flex bn-flex-wrap bn-justify-evenly">
			{colors.map((item: string) => {
				// biome-ignore format:
				const color = `bn-bg-[${item}]`;
				// biome-ignore format:
				return <div className="bn-size-[7.47px] bn-rounded-sm" key={item} style={{background: item}}/>
			})}
		</div>
	);
};
