import React, {  useCallback, useRef } from "react";
import PropTypes from "prop-types";
import { EndIcon, SearchIcon, SearchInput } from "./HeadersMyOffers.styled";
import { useTranslation } from "react-i18next";

const HeadersMyOffers = (props) => {
  const searchRef = useRef(null);
  const {t} = useTranslation();
  let listener = useCallback((event) => {
    if (event.keyCode === 13) {
      event.preventDefault();
      handleSearch();
    }
  }, [searchRef.current])
  const handleFocusSearch = () => {
    searchRef.current.addEventListener("keyup", listener);
  };
  const handleBlurSearch = () => {
    searchRef.current.removeEventListener("keyup", listener);
  };
  const handleSearch = () => {
    props.searchMyOffers(searchRef.current.value);
    props.handleSearch();
  };
  return (
    <SearchInput
      fullWidth
      InputProps={{
        endAdornment: (
          <EndIcon size="36px">
            <SearchIcon onClick={() => handleSearch(searchRef.current.value)} />
          </EndIcon>
        ),
      }}
      placeholder={t("header.searchOffers")}
      onFocus={handleFocusSearch}
      onBlur={handleBlurSearch}
      ref={searchRef}
    />
  );
};

HeadersMyOffers.propTypes = {
  children: PropTypes.node,
  searchMyOffers: PropTypes.func,
  handleSearch: PropTypes.func,
};

export default HeadersMyOffers;
