import React, { useCallback, useEffect, useState } from 'react';
import { Form } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import debounce from 'lodash-es/debounce';
import './search-field.scss';

export interface SearchFieldPropTypes {
    isDisabled?: boolean;
    onHandleChange: any;
    placeholder: string;
    searchClassName?: string;
    searchInputName: string;
    states: any;
    setStates: any;
    clearSearchField: boolean;
    validatePattern?: any | null;
    value?: string | null | undefined;
}

export const SearchField: React.FC<SearchFieldPropTypes> = ({
    isDisabled = false,
    onHandleChange,
    placeholder,
    searchClassName = '',
    searchInputName,
    states,
    setStates,
    clearSearchField,
    validatePattern,
    value,
}) => {
    const [searchInput, setSearchInput] = useState<string>('');

    const debouncedSearch = useCallback(
        debounce((value: string) => {
            setStates({ ...states });
            onHandleChange(value);
        }, 500),
        [states]
    );

    const setSearch = (value: any) => {
        if (validatePattern) {
            if (value === '' || validatePattern.test(value)) {
                setSearchInput(value);
                debouncedSearch(value);
            }
        } else {
            setSearchInput(value);
            debouncedSearch(value);
        }
    };

    const onClear = () => {
        setSearchInput('');
        debouncedSearch('');
    };

    useEffect(() => {
        setSearchInput('');
    }, [clearSearchField]);

    useEffect(() => {
        if (value && !searchInput) setSearchInput(value);
    }, [value]);

    return (
        <div className="SearchField">
            <span>
                <Form.Control
                    className={`SearchFieldInput ${searchClassName}`}
                    data-testid="searchFieldInput"
                    name={searchInputName}
                    placeholder={placeholder}
                    onChange={(e: any) => setSearch(e.target.value)}
                    type="text"
                    value={searchInput}
                    disabled={isDisabled}
                />
            </span>
            <span
                className="SearchFieldIcon"
                onClick={onClear}
                data-testid="SearchFieldIcon"
                onKeyPress={onClear}
            >
                {searchInput ? (
                    <GlyphIcon name="close" size={12} />
                ) : (
                    <GlyphIcon name="search" size={16} />
                )}
            </span>
        </div>
    );
};