import { CloseIcon, SearchIcon } from "@src/assets/icons";
import { useSwapContext } from "@src/context";
import { useMemo, useState, useRef, useEffect } from "react";
import { Virtuoso } from "react-virtuoso";
import { SwapPanelType } from "../../../../SwapView";
import { ChainItem } from "./ChainItem";
import { TextInput } from "@src/components";

type Props = {
  type: SwapPanelType;
  onClose: () => void;
};

export const ChainPicker = ({ type, onClose }: Props) => {
  const { setSrcChain, setDstChain, srcChainOptions, dstChainOptions } =
    useSwapContext();

  const [searchValue, setSearchValue] = useState("");
  const chainSearchRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    if (chainSearchRef.current) {
      setTimeout(() => {
        chainSearchRef.current?.focus();
      }, 10);
    }
  }, []);

  // search input filtering
  const filteredChains = useMemo(() => {
    const chains = type === "source" ? srcChainOptions : dstChainOptions;
    if (!searchValue) return chains;

    return chains.filter((chain) => {
      const searchLower = searchValue.toLowerCase();
      return (
        chain.displayName.toLowerCase().includes(searchLower) ||
        chain.chainId.toLowerCase().includes(searchLower)
      );
    });
  }, [type, srcChainOptions, dstChainOptions, searchValue]);

  const select = (selectedChainId: string) => {
    const chain = filteredChains.find(
      ({ chainId }) => chainId === selectedChainId,
    );

    if (!chain) {
      throw new Error(
        `ChainPicker > selected chain id that is absent in chain options list.`,
      );
    }

    type === "source" ? setSrcChain(chain) : setDstChain(chain);
    onClose();
  };

  return (
    <div className="flex flex-col h-full">
      <div className="flex justify-between">
        <div className="text-base/4 text-t_text_primary mb-4">{`Pick ${type} chain`}</div>
        <div
          className="w-4 h-4 fill-t_text_primary cursor-pointer"
          onClick={onClose}
        >
          <CloseIcon />
        </div>
      </div>

      <TextInput
        ref={chainSearchRef}
        inputIcon={
          <div className="fill-t_text_primary">
            <SearchIcon />
          </div>
        }
        placeholder="Search chain name"
        value={searchValue}
        handleChange={setSearchValue}
      />

      <div className="horizontal-separator mt-4" />
      <div className="h-full pt-4">
        {filteredChains.length ? (
          <Virtuoso
            style={{ height: "100%" }}
            data={filteredChains}
            itemContent={(_, chain) => (
              <ChainItem
                chain={chain}
                type={type}
                disabled={chain.disabled}
                onClick={select}
              />
            )}
          />
        ) : (
          <div className="flex justify-center mt-4">No chain found.</div>
        )}
      </div>
    </div>
  );
};