/**
 * Search Input panel in left menu
 *
 * @author Brauer Ilya
 * @date 2021-09-21
 */
import * as React from 'react';
import {Button, Input} from '../../../component';
import {SIZE} from '../../../constants';

interface IProps {
    placeholder: string;
    searchText: string;
    onChangeSearchText: (searchText: string) => void;
}

export class SearchTextPanel extends React.PureComponent<IProps> {

    handleChangeSearchText = (e: React.SyntheticEvent<HTMLInputElement>) => {
        this.props.onChangeSearchText(e.currentTarget.value);
    };

    handleClearSearchText = () => {
        this.props.onChangeSearchText('');
    }

    override render () {

        return (
            <>
                <Input
                    onChange={this.handleChangeSearchText}
                    value={this.props.searchText}
                    placeholder={this.props.placeholder}
                    suffix={this.props.searchText && (
                        <Button
                            leftIcon='cross'
                            size={SIZE.SMALL}
                            isMinimal={true}
                            onClick={this.handleClearSearchText}
                        />
                    )}
                    data-qaid='search-text'
                />
            </>
        );
    }

}