import React, { useEffect, useState } from 'react';
import { Input, Icon } from 'semantic-ui-react';
import cx from 'classnames';

import './SearchInput.less';

export const SearchInput: React.FC<{
  onSearch: (value: string) => void;
}> = ({ onSearch }) => {
  const [value, setValue] = useState('');

  useEffect(() => {
    onSearch(value);
  }, [value, onSearch]);

  return (
    <div
      className={cx('HIRO_SearchInput', {
        'HIRO_SearchInput--active': !!value,
      })}
    >
      <Input
        fluid
        placeholder="Search for issue..."
        onChange={(event) => setValue(event.target.value)}
        value={value}
      />

      <Icon
        onClick={value ? () => setValue('') : undefined}
        name={value ? 'x' : 'search'}
        fitted
      />
    </div>
  );
};
