/* eslint-disable @typescript-eslint/no-explicit-any */
import FactoryRenderer from "../../../../Renderer";

export type GlobalSearchViewProps = {
  disabled: boolean;
  value: string | undefined;
  onSearchChange: (searchKey: string | undefined) => void;
  onClearSearch: () => void;
  onSearch: () => void;
};

/*
 * `InputSeparator` and `InputClearValue` (@progress/kendo-react-inputs) are
 * plain <span> elements with a fixed class - there is no widget equivalent and
 * none should exist. They are inlined below so this file carries no Kendo
 * import, with the exact classes the Kendo components emit:
 *
 *   InputSeparator  -> classNames("k-input-separator", className,
 *                                 `k-input-separator-${orientation}`)
 *                      with orientation defaulting to "vertical"
 *                      => "k-input-separator k-input-separator-vertical"
 *
 *   InputClearValue -> classNames(uInput.clearButton({ c }), className) where
 *                      uInput.clearButton resolves to
 *                      `${base.prefix}-${base.clear}-${base.value}`
 *                      = "k" + "-" + "clear" + "-" + "value"
 *                      => "k-clear-value"
 *                      (evaluated against the installed
 *                       @progress/kendo-react-common/unstyled/inputs.js)
 */
const INPUT_SEPARATOR_CLASS = "k-input-separator k-input-separator-vertical";
const INPUT_CLEAR_VALUE_CLASS = "k-clear-value";

const GlobalSearchView = (props: GlobalSearchViewProps) => {
  return (
    <FactoryRenderer
      uiElementType="WIDGET"
      widgetType="TEXTBOX"
      disabled={props.disabled}
      value={props.value ?? ""}
      placeHolder="Type here to search . . ."
      /*
       * `.tmpl-global-search { flex: 1 }` is scoped to a direct child of the
       * flex `.tmpl-grid-toolbar-container`, so it has to sit on the widget's
       * outer <section>; the class is repeated on the inner `.k-input` wrapper
       * (widgetStyle) so the field's own rules — height, inset, type — land on
       * the element Kendo draws the box on. The type is `$font-size-sm`, from
       * `.tmpl-grid-toolbar-container .tmpl-global-search` in the SCSS. It used
       * to be an inline `fontSize: "12px"` here, beside a `qo-font-md` (13px)
       * class that Kendo's `.k-input` out-ordered — the class said one size and
       * the inline style drew another, and neither could be restyled.
       */
      rootStyle={{ className: "tmpl-global-search" }}
      widgetStyle={{ className: "tmpl-global-search tmpl-input" }}
      onKeyUp={(_callBack: any, _screenDataField: any, event: any) => {
        if (event?.key === "Enter" || event?.code === "Enter") {
          props.onSearch();
        }
      }}
      onChange={(_callBack: any, _screenDataField: any, value: any) => {
        props.onSearchChange(value as string);
      }}
      suffix={() =>
        props.value ? (
          <>
            <span className={INPUT_SEPARATOR_CLASS} />
            <span
              className={INPUT_CLEAR_VALUE_CLASS}
              onClick={props.onClearSearch}
            >
              <FactoryRenderer
                name="close"
                uiElementType="WIDGET"
                widgetType="ICON"
                fillMode="clear"
                title=""
                aria-label="Clear search"
              />
            </span>
          </>
        ) : (
          <></>
        )
      }
      prefix={() => (
        <>
          <span className={INPUT_CLEAR_VALUE_CLASS} onClick={props.onSearch}>
            <FactoryRenderer
              name="search"
              uiElementType="WIDGET"
              widgetType="ICON"
              fillMode="clear"
              title=""
              aria-label="Search"
            />
          </span>
          <span className={INPUT_SEPARATOR_CLASS} />
        </>
      )}
    />
  );
};
export default GlobalSearchView;