import {closeOnOutsideClick} from 'hooks/closeOnOutsideClick';
import React, {useRef, useState} from 'react';
import {
  SearchForm,
  SearchInput,
  SearchIcon,
  SearchButton,
  MobileSearchWrapper,
  MobileSearchContainer,
  MobileSearchButton,
  MobileSearchIcon,
} from './styles';

interface SearchProps {}

export const MobileSearch: React.FC<SearchProps> = (): JSX.Element => {
  const [showSearch, setShowSearch] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const wrapperRef = useRef(null);

  const onSubmit = (e: {preventDefault: () => void}) => {
    e.preventDefault();
    window.location.href = '/search?s=' + searchValue;
  };

  const onToggleSearch = () => {
    setShowSearch(prevState => !prevState);
  };

  closeOnOutsideClick(wrapperRef, () => setShowSearch(false));

  return (
    <MobileSearchWrapper ref={wrapperRef}>
      <MobileSearchButton onClick={onToggleSearch}>
        <MobileSearchIcon src={'/images/icons/search-icon-mobile.svg'} />
      </MobileSearchButton>
      <MobileSearchContainer showSearch={showSearch}>
        <SearchForm onSubmit={onSubmit}>
          <SearchInput placeholder="Search" value={searchValue} onChange={e => setSearchValue(e.target.value)} />
          <SearchButton>
            <SearchIcon src={'/images/icons/search-icon.svg'} />
          </SearchButton>
        </SearchForm>
      </MobileSearchContainer>
    </MobileSearchWrapper>
  );
};

export default MobileSearch;