import {
  InputClearValue,
  InputSeparator,
  TextBox,
} from "@progress/kendo-react-inputs";
import FactoryRenderer from "../../../../Renderer";
export type GlobalSearchViewProps = {
  disabled: boolean;
  value: string | undefined;
  onSearchChange: (searchKey: string | undefined) => void;
  onClearSearch: () => void;
  onSearch: () => void;
};

const GlobalSearchView = (props: GlobalSearchViewProps) => {
  return (
    <TextBox
      disabled={props.disabled}
      value={props.value ?? ""}
      style={{ fontSize: "12px" }}
      className="tmpl-global-search tmpl-input qo-font-md"
      placeholder="Type here to search . . ."
      onKeyUp={(e) => {
        if (e.key === "Enter" || e.code === "Enter") {
          props.onSearch();
        }
      }}
      onChange={(e) => {
        props.onSearchChange(e.target.value as string);
      }}
      suffix={() =>
        props.value ? (
          <>
            <InputSeparator />
            <InputClearValue onClick={props.onClearSearch}>
              <FactoryRenderer
                name="close"
                uiElementType="WIDGET"
                widgetType="ICON"
                fillMode="clear"
                title=""
              />
            </InputClearValue>
          </>
        ) : (
          <></>
        )
      }
      prefix={() => (
        <>
          <InputClearValue onClick={props.onSearch}>
            <FactoryRenderer
              name="search"
              uiElementType="WIDGET"
              widgetType="ICON"
              fillMode="clear"
              title=""
            />
          </InputClearValue>
          <InputSeparator />
        </>
      )}
    />
  );
};
export default GlobalSearchView;