import { useEffect, useRef, useState } from "react";
import { useOnClickOutside } from "../../hooks";
import useDebounce from "../../hooks/useDebounce";
import { ISearchProps } from "./search.props";
import { SearchWrapper } from "./Search.style";

const Search: React.FC<ISearchProps> = ({onChange, placeholder = "Search by..."}) => {

    const [value, setValue] = useState<string>("");
    const debouncedValue = useDebounce(value, 500);
    const [expandInput, setExpandInput] = useState(false);
    const ref = useRef(null);
    const [input, setInput] = useState<HTMLInputElement | null>();

    useEffect(()=>{
        onChange(debouncedValue);
        // window.localStorage.setItem('SAVE_SEARCH', JSON.stringify(value));
    }, [debouncedValue]);

    useEffect(()=>{
        const data = window.localStorage.getItem('SAVE_SEARCH');
        if (data !== null)
        setValue(JSON.parse(data))
    }, [setValue]);

    useEffect(()=>{
        expandInput && input?.focus();
    }, [expandInput]);

    const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
        window.localStorage.setItem('SAVE_SEARCH', JSON.stringify(e.target.value));
    }

    useOnClickOutside(ref, () => value === "" && setExpandInput(false));


    return(
        <SearchWrapper expandInput={expandInput} ref={ref}>
            <input ref={inputEl => setInput(inputEl)} type="text" onChange={(e) => searchHandler(e)} value={value} placeholder={placeholder} />
            { (expandInput && (value.length > 0)) && <i className="ico-Exit" onClick={()=> setValue("")} ></i>}
            <button className="search-button" onClick={() => setExpandInput(true)}>
                <i className="ico-Search"></i>
            </button>
        </SearchWrapper>
    )
}

export default Search;