import React, { FC, RefObject, useEffect, useState } from 'react';
import classNames from 'classnames';
import css from './index.module.css';

import SearchSVG from '../../assets/icons/search.svg';
import CloseSVG from '../../assets/icons/icon_close.svg';

export interface InputSearchProps {
  inputRef?: RefObject<HTMLInputElement>;
  value?: string;
  disabled?: boolean;
  placeholder?: string;
  label: string;
  name: string;
  hasResults?: boolean;
  onChange?: (e) => void;
  onKeyDown?: (e) => void;
  onFocus?: (e) => void;
  onInvalid?: (e) => void;
  onInput?: (e) => void;
  onSearchToggle?: (e) => void;
  setCloseSearch?: (value) => void;
  mobileNavOpen?: boolean;
  stickyHeader?: boolean;
  closeSearch: boolean;
  searchText: string;
  variant: 'normal' | 'header';
}

const InputSearch: FC<InputSearchProps> = ({
  label,
  placeholder,
  name,
  value,
  onChange,
  onKeyDown,
  onFocus,
  disabled,
  onInvalid,
  onInput,
  inputRef,
  mobileNavOpen,
  stickyHeader,
  closeSearch,
  searchText,
  variant,
  setCloseSearch,
}) => {
  const inputClassNames = classNames(css.inputSearch, {
    [css.inputSearchIcon]: true,
    [css.inputSearchOpen]: closeSearch,
    [css.searchHover]: !closeSearch,
    [css.inputSearchSticky]: stickyHeader,
    [css.inputSearchMobile]: mobileNavOpen,
  });

  const inputClassNamesNormal = classNames(css.inputSearchNormal, {
    [css.inputSearchIcon]: true,
  });

  const [inputValue, setInputValue] = useState(value);
  useEffect(() => {
    setInputValue(value);
  }, [value]);

  useEffect(() => {
    if (!closeSearch) {
      setInputValue('');
    }
  }, [closeSearch]);

  if (variant === 'header') {
    return (
      <label className={inputClassNames} data-testid="Input">
        {label && <span className={css.inputSearch__label}>{label}</span>}
        <div className={css.inputSearch__fieldWrap}>
          <input
            style={{ display: closeSearch ? 'block' : 'none' }}
            autoComplete="off"
            disabled={disabled}
            ref={inputRef}
            name={name}
            required
            type="text"
            placeholder={closeSearch ? placeholder : ''}
            aria-label={label}
            className={css.inputSearch__field}
            value={inputValue}
            onChange={onChange}
            onKeyDown={onKeyDown}
            onFocus={onFocus}
            onInvalid={onInvalid}
            onInput={onInput}
          />

          <div
            className={css.svg}
            onClick={(): void => setCloseSearch(false)}
            style={{
              opacity: !closeSearch ? 1 : 0,
              visibility: !closeSearch ? 'visible' : 'hidden',
            }}
          >
            <span className={css.inputSearch__iconSearch}>{searchText}</span>
            <SearchSVG className={css.inputSearch__icon} />
          </div>

          <div
            className={css.svg__wrapper}
            style={{
              opacity: closeSearch ? 1 : 0,
              visibility: closeSearch ? 'visible' : 'hidden',
            }}
            onClick={(): void => {
              setInputValue('');
              setCloseSearch(true);
            }}
          >
            <CloseSVG className={css.inputSearch__icon} />
          </div>
        </div>
      </label>
    );
  } else {
    return (
      <label className={inputClassNamesNormal} data-testid="Input">
        {label && <span className={css.inputSearch__label}>{label}</span>}
        <div className={css.inputSearch__fieldWrap}>
          <SearchSVG className={css.inputSearch__icon} width="18px" />
          <input
            autoComplete="off"
            disabled={disabled}
            ref={inputRef}
            name={name}
            required
            type="text"
            placeholder={placeholder}
            aria-label={label}
            className={css.inputSearch__field}
            value={value}
            onChange={onChange}
            onKeyDown={onKeyDown}
            onFocus={onFocus}
            onInvalid={onInvalid}
            onInput={onInput}
          />
        </div>
      </label>
    );
  }
};

export default InputSearch;