import React from "react";
import { cn, debounce } from "../utils";
import { InputBase } from "./Input";

interface InputSearchProps {
  className?: string;
  onChange?: (val: string) => void;
  placeholder?: string;
  debounceTime?: number;
}

const InputSearchBase = ({
  className,
  onChange,
  placeholder,
  debounceTime = 800,
}: InputSearchProps) => {
  const handleSearch = debounce((e: any) => {
    onChange && onChange(e.target.value ?? "");
  }, debounceTime);

  return (
    <InputBase
      className={cn("uikit-h-11 uikit-w-full", className)}
      placeholder={placeholder}
      whiteBg={false}
      onChange={(e: any) => handleSearch(e)}
    />
  );
};

export function SearchIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      {...props}
    >
      <path
        d="M15.0259 13.8477L18.5948 17.4166L17.4163 18.5951L13.8474 15.0262C12.5642 16.0528 10.9367 16.667 9.16675 16.667C5.02675 16.667 1.66675 13.307 1.66675 9.16699C1.66675 5.02699 5.02675 1.66699 9.16675 1.66699C13.3067 1.66699 16.6667 5.02699 16.6667 9.16699C16.6667 10.937 16.0526 12.5644 15.0259 13.8477ZM13.354 13.2293C14.373 12.1792 15.0001 10.7467 15.0001 9.16699C15.0001 5.94408 12.3897 3.33366 9.16675 3.33366C5.94383 3.33366 3.33341 5.94408 3.33341 9.16699C3.33341 12.3899 5.94383 15.0003 9.16675 15.0003C10.7464 15.0003 12.1789 14.3732 13.2291 13.3542L13.354 13.2293Z"
        fill="#8989AB"
      />
    </svg>
  );
}
const InputSearch = ({ onSearch }: { onSearch: (kw: string) => void }) => {
  return (
    <div className={"uikit-px-5 uikit-py-2"}>
      <div className="uikit-relative uikit-flex uikit-flex-row uikit-items-center uikit-justify-center uikit-gap-[6px] uikit-rounded-[40px] uikit-bg-tc1/5 dark:uikit-bg-tc1-dark/5">
        <SearchIcon className="uikit-absolute uikit-left-4 uikit-size-[20px] uikit-text-tc1/60 dark:uikit-text-tc1-dark/60" />
        <InputSearchBase
          placeholder="Search Wallet"
          debounceTime={100}
          className="uikit-pl-11 uikit-text-sm"
          onChange={(val: string) => {
            onSearch(val);
          }}
        />
      </div>
    </div>
  );
};

export default InputSearch;