import type {
  AriaAttributes,
  FormEvent,
  InputHTMLAttributes,
  ReactNode,
} from 'react'
import React, { forwardRef, useImperativeHandle, useRef } from 'react'

import { Icon, IconButton, Input } from '../..'

type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>

type ButtonProps = {
  onClick?: () => void
  testId?: string
  'aria-label'?: string
}

export interface SearchInputFieldProps extends InputProps {
  /**
   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
   */
  testId?: string
  /**
   * Props for the submit button inside the input.
   */
  buttonProps?: ButtonProps
  /**
   * A React component that will be rendered as an icon (submit button).
   * @default <Icon name="MagnifyingGlass" />
   */
  buttonIcon?: ReactNode
  /**
   * Whether to show the attachment button.
   * @default false
   */
  showAttachmentButton?: boolean
  /**
   * Props for the paperclip button inside the input.
   */
  attachmentButtonProps?: ButtonProps
  /**
   * Aria-label for the attachment button (e.g. from CMS).
   */
  attachmentButtonAriaLabel?: string
  /**
   * Aria-label for the submit button (e.g. from CMS).
   */
  submitButtonAriaLabel?: string
  /**
   * A React component that will be rendered as an icon (attachment button).
   * @default <Icon name="Paperclip" />
   */
  attachmentButtonIcon?: ReactNode
  /**
   * Aria-label for the search input (e.g. from CMS).
   */
  'aria-label'?: AriaAttributes['aria-label']
  /**
   * Callback function when submitted.
   */
  onSubmit: (value: string) => void
}

export interface SearchInputFieldRef {
  inputRef?: HTMLInputElement | null
  formRef?: HTMLFormElement | null
}

const SearchInputField = forwardRef<
  SearchInputFieldRef | null,
  SearchInputFieldProps
>(function SearchInputField(
  {
    onSubmit,
    buttonIcon,
    showAttachmentButton = false,
    attachmentButtonAriaLabel,
    attachmentButtonIcon,
    attachmentButtonProps,
    submitButtonAriaLabel,
    'aria-label': ariaLabel,
    testId = 'fs-search-input',
    buttonProps,
    ...otherProps
  },
  ref
) {
  const inputRef = useRef<HTMLInputElement>(null)
  const formRef = useRef<HTMLFormElement>(null)

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault()

    if (inputRef.current?.value !== '') {
      onSubmit(inputRef.current!.value)
    }
  }

  const { 'aria-label': buttonAriaLabel, ...otherButtonProps } =
    buttonProps ?? {}

  useImperativeHandle(ref, () => ({
    inputRef: inputRef.current,
    formRef: formRef.current,
  }))

  return (
    <div data-fs-search-input-field-wrapper>
      <form
        ref={formRef}
        data-fs-search-input-field
        data-testid={testId}
        onSubmit={handleSubmit}
        role="search"
      >
        <Input
          ref={inputRef}
          aria-label={ariaLabel}
          data-fs-search-input-field-input
          {...otherProps}
        />

        <div data-fs-search-input-field-actions>
          {showAttachmentButton && (
            <>
              <IconButton
                data-fs-search-input-field-attachment-button
                type="button"
                aria-label={attachmentButtonAriaLabel}
                icon={attachmentButtonIcon ?? <Icon name="Paperclip" />}
                size="small"
                {...attachmentButtonProps}
              />

              <span data-fs-search-input-field-separator />
            </>
          )}

          <IconButton
            data-fs-search-input-field-submit-button
            type="submit"
            aria-label={submitButtonAriaLabel}
            icon={buttonIcon ?? <Icon name="MagnifyingGlass" />}
            size="small"
            {...otherButtonProps}
          />
        </div>
      </form>
    </div>
  )
})

export default SearchInputField