import { FC, useMemo } from "react";
import { assetInfoStore } from "../../store/assetInfoStore";
import { swapStore } from "../../store/swapStore";
import { AssetChainLogos } from "../../common/AssetChainLogos";
import { IOType } from "../../constants/constants";

type AssetSelectorProps = {
  isFromAsset: boolean;
  openDropdown: string | null;
  setOpenDropdown: (id: string | null) => void;
  dropdownId: string;
};

export const AssetSelector: FC<AssetSelectorProps> = ({
  isFromAsset,
  openDropdown,
  setOpenDropdown,
  dropdownId,
}) => {
  const { assets, allChains } = assetInfoStore();
  const { inputAsset, outputAsset, setAsset } = swapStore();

  const currentAsset = isFromAsset ? inputAsset : outputAsset;

  const assetOptions = useMemo(() => {
    if (!assets) return [];
        const otherAsset = isFromAsset ? outputAsset : inputAsset;
    
    return Object.values(assets)
      .filter((asset) => {
        if (otherAsset && asset.tokenAddress === otherAsset.tokenAddress && asset.chain === otherAsset.chain) {
          return false;
        }
        return true;
      })
      .map((asset) => {
        const chainData = allChains ? allChains[asset.chain] : null;
        return {
          value: asset.tokenAddress,
          label: asset.symbol,
          asset,
          chainLogo: chainData ? chainData.networkLogo : "",
        };
      });
  }, [assets, allChains, isFromAsset, inputAsset, outputAsset]);

  const handleSelect = (option: any) => {
    setOpenDropdown(null);
    if (isFromAsset) {
      setAsset(IOType.input, option.asset);
    } else {
      setAsset(IOType.output, option.asset);
    }
  };

  return (
    <div className="relative w-full max-w-md">
      <div
        className="flex items-center justify-between border border-gray-300 rounded-2xl px-4 py-2 cursor-pointer hover:border-gray-400"
        onClick={() => setOpenDropdown(openDropdown === dropdownId ? null : dropdownId)}
      >
        {currentAsset ? (
          <div className="flex items-center gap-2">
            <AssetChainLogos
              tokenLogo={currentAsset.logo}
              chainLogo={allChains ? allChains[currentAsset.chain]?.networkLogo : ""}
            />
            <span className="text-sm">{currentAsset.symbol}</span>
          </div>
        ) : (
          <span className="text-gray-400 text-sm">Select asset...</span>
        )}
        <svg
          className={`w-4 h-4 transition-transform ${
            openDropdown === dropdownId ? "rotate-180" : ""
          }`}
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          viewBox="0 0 24 24"
        >
          <path d="M19 9l-7 7-7-7" />
        </svg>
      </div>

      {openDropdown === dropdownId && (
        <div className="absolute z-40 w-full bg-white border border-gray-200 rounded-2xl mt-2 max-h-60 overflow-y-auto shadow-lg">
          {assetOptions.map((option) => (
            <div
              key={option.asset.tokenAddress}
              onClick={() => handleSelect(option)}
              className="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-gray-100"
            >
              <AssetChainLogos
                tokenLogo={option.asset.logo}
                chainLogo={option.chainLogo}
              />
              <span className="text-sm">{option.label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};