import * as React from 'react';
import SearchSVG from 'assets/svg/search.svg';
import ClearSVG from 'assets/svg/close.svg';

import s from './Search.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface ISearchProps {
  color: string;
  onChange?({ target }: any): any;
  onKeyDown?(e: any): any;
  onClear?(e: any): any;
  placeholder: string;
  value?: string;
  className?: string;
}

export const Search = ({
  className,
  color,
  onChange,
  onKeyDown,
  onClear,
  value,
  placeholder,
  ...rest
}: ISearchProps) => {
  const [isSearchOnFocus, setisSearchOnFocus] = React.useState(false);

  const onFocus = () => {
    setisSearchOnFocus(true);
  };

  const onBlur = () => {
    setisSearchOnFocus(false);
  };

  const searchIconClick = () => {
    const searchInput = document.getElementById('searchService');

    if (searchInput) {
      searchInput.focus();
    }
  };

  const showClear = (value !== '' || isSearchOnFocus) && onClear;

  return (
    <div className={`${cn(s.search, { isSearchOnFocus })} ${className}`}>
      <button type="button" onClick={searchIconClick} className={s.search__iconButton}>
        <SearchSVG className={cn(s.search__svg, `fill-${color}`)} />
      </button>
      <input
        className={cn(s.search__input, { showClear })}
        placeholder={placeholder}
        value={value}
        name="search"
        id="searchService"
        type="text"
        onChange={onChange}
        onKeyDown={onKeyDown}
        onFocus={onFocus}
        onBlur={onBlur}
        {...rest}
      />
      {showClear && (
        <div className={s.search__clear} onClick={onClear}>
          <ClearSVG className={s.search__clearSVG} />
        </div>
      )}
    </div>
  );
};