import React, { useState } from "react";
import { useField } from "formik";
import { FormLabel } from '@mui/material';
import LoadingOverlay from 'react-loading-overlay-ts';
import SearchBar from "material-ui-search-bar";
import { t } from "../../../auto/js/services";

export const SearchComponent = (props) => {
    const [searchText, setSearchText] = useState("");

    const onChange = (text) => {
		setSearchText(text);
	}
	const onRequestSearch = () => {
        if (searchText != null && searchText != "") {
		    props.loadData(searchText).then((data) => props.observable.publish(data));
        }
	}

    return(
        <>
        <FormLabel component={"legend"}>{t(props.name)}</FormLabel>
        {(!props.readOnly) && <SearchBar
			style={{marginLeft: '1rem', marginRight: '-1rem'}}
			onChange={onChange}
			onRequestSearch={onRequestSearch}/>}
        </>
    )
}


