import { Search as SearchIcon } from '@transferwise/icons';
import { clsx } from 'clsx';
import { forwardRef, InputHTMLAttributes } from 'react';

import { Input } from '../../inputs/Input';

type Props = {
  id?: string;
  classNames?: Record<string, string>;
  focusedOptionId?: string;
} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onClick' | 'placeholder' | 'value'>;

const SearchBox = forwardRef<HTMLInputElement, Props>(
  (
    {
      id,
      classNames = {},
      focusedOptionId,
      onChange,
      onClick,
      placeholder = undefined,
      value = '',
    },
    reference,
  ) => {
    const style = (className: string) => classNames[className] || className;
    return (
      <li className={style('border-bottom')}>
        <a className={`${style('np-select-filter-link')} ${style('p-a-0')}`}>
          <div className={style('input-group')}>
            <span className={clsx('input-group-addon', 'input-group-addon--search')}>
              <SearchIcon className={clsx(style('tw-icon'), style('tw-icon-search'))} size={24} />
            </span>
            <Input
              ref={reference}
              id={id}
              role="searchbox"
              inputMode="search"
              className={clsx(style('np-select-filter'))}
              placeholder={placeholder}
              value={value}
              spellCheck="false"
              aria-activedescendant={focusedOptionId}
              onChange={onChange}
              onClick={onClick}
            />
          </div>
        </a>
      </li>
    );
  },
);

export default SearchBox;