import { useMemo, useState } from "react";
import { WalletItemProps } from "../type";

import { Empty, Footer, WalletList } from "./WalletSelector";
import InputSearch from "./InputSearch";

interface IProps {
  walletOptions?: WalletItemProps[];
  onClickWalletItem: (wallet: WalletItemProps, index: number) => void;
  connected?: boolean;
  loadingIconKey?: string;
}

const ConnectWalletMain = ({ walletOptions = [], onClickWalletItem, loadingIconKey }: IProps) => {
  const [keyWord, setKeyWord] = useState("");

  const filterWalletList = useMemo(
    () => walletOptions.filter((item) => item.name.toLowerCase().startsWith(keyWord.toLowerCase())),
    [walletOptions, keyWord],
  );
  const handleWalletSelect = (wallet: WalletItemProps, index: number) => {
    onClickWalletItem?.(wallet, index);
  };

  return (
    <div className={"uikit-h-[440px] uikit-w-[375px] uikit-select-none uikit-pb-2 uikit-t-2"}>
      <InputSearch onSearch={(kw: string) => setKeyWord(kw)} />
      {filterWalletList.length > 0 ? (
        <WalletList
          grid
          className="uikit uikit-pb-16 uikit-mt-5 uikit-h-[calc(100%-60px-20px-60px)] uikit-overflow-y-auto uikit-overscroll-y-contain uikit-flex-1 uikit-min-h-0"
          style={{
            WebkitOverflowScrolling: "touch",
          }}
          walletList={filterWalletList}
          handleClick={handleWalletSelect}
          loadingIconKey={loadingIconKey}
        />
      ) : (
        <Empty />
      )}
      <Footer></Footer>
    </div>
  );
};

export default ConnectWalletMain;