import React, { type Ref } from 'react'

import {
  DEBOUNCE_STANDARD_TIME,
  notEmpty,
} from '../../services/HelperServiceTyped'
import Icon from '../Icons/Icon'
import TextInput from '../Form/TextInput'
import { useMediaQuery } from '../../hooks/responsiveHooks'
import styles from './_search-bar.module.scss'
import { c } from '../../translations/LibraryTranslationService'

export type SearchBarProps = {
  /** The value to be passed into the `SearchBar` */
  value: string
  /** The function that will update the `value` */
  onChange: (searchInputText: string) => void
  /** Optionally add a debounce in milliseconds. The default time is DEBOUNCE_STANDARD_TIME (250ms) */
  debounce?: number
  /** Optionally start with the `SearchBar` in a focused state */
  autoFocus?: boolean
  /** `SearchBar` placeholder text. The default placeholder is "Search" */
  placeholder?: string
  /** Optionally add a keyUp callout to perform */
  keyUpCallout?: () => void
  /** Optionally pass in a minimum width to make the `SearchBar` wider. The default `minWidth` is 300px.
   ** NOTE: This override only applies to tablet and desktop. It should only be used if UX needs to make the `SearchBar` minimum width something other than 300px. */
  minWidth?: number
  /** Optionally pass in a function to be called when the `SearchBar` is focused */
  onFocus?: () => void
  /** Optional prop to add a test id to the SearchBar for QA testing */
  qaTestId?: string
  /** Optional prop that specifies the maximum length of the value entered by the user in the input field. */
  maxLength?: number
  /** When true, strips scanner symbology prefixes (e.g. `~A`, `~P12`, `]C1`) from the displayed value and `onChange` */
  shouldStripSymbologyPrefix?: boolean
}

const SearchBar = ({
  value,
  onChange,
  debounce = DEBOUNCE_STANDARD_TIME,
  autoFocus,
  placeholder = c('search'),
  onFocus,
  keyUpCallout,
  minWidth = 300,
  ref,
  qaTestId = 'search-bar',
  maxLength,
  shouldStripSymbologyPrefix,
}: SearchBarProps & {
  ref?: Ref<HTMLInputElement | null>
}): React.JSX.Element | null => {
  const isLargerThanMobile = useMediaQuery({ type: 'min', breakpoint: 'md' })

  return (
    <div
      className={styles.container}
      style={{
        ...(minWidth && isLargerThanMobile ? { minWidth } : {}),
      }}
      qa-test-id={qaTestId}
    >
      <Icon icon='magnifier' iconSize='16px' className={styles.searchIcon} />
      <TextInput
        value={value}
        callout={(_, value) => {
          onChange(value.toString())
        }}
        placeholder={placeholder}
        classType={`${styles.input} ${notEmpty(value) ? styles.hasText : ''}`}
        debounce={debounce}
        autoFocus={autoFocus}
        ref={ref}
        keyUp={keyUpCallout}
        clear={notEmpty(value)}
        clearCallout={() => onChange('')}
        onFocus={onFocus}
        qaTestId={qaTestId}
        maxLength={maxLength}
        shouldStripSymbologyPrefix={shouldStripSymbologyPrefix}
      />
    </div>
  )
}

SearchBar.displayName = 'SearchBar'
export default SearchBar