"use client"

import * as React from "react"
import { DateTextInputField } from "../ui/date-picker-field"
import { Input } from "../ui/input"
import { MaskedInput, exxatMaskPatterns } from "../ui/input-mask"
import type { Mask } from "../ui/input-mask"
import type { FilterTextMask } from "../../lib/table-properties-types"

const MASK_BY_KIND: Record<FilterTextMask, Mask> = {
  phone: exxatMaskPatterns.phoneUS,
  zip: exxatMaskPatterns.zipUS,
  dateMDY: exxatMaskPatterns.dateMDY,
}

export function FilterTextValueInput({
  id,
  mask,
  value,
  onValueChange,
  "aria-label": ariaLabel,
  placeholder,
  className,
  autoFocus,
}: {
  id?: string
  mask?: FilterTextMask
  value: string
  onValueChange: (next: string) => void
  "aria-label": string
  placeholder?: string
  className?: string
  autoFocus?: boolean
}) {
  if (mask === "dateMDY") {
    return (
      <DateTextInputField
        id={id}
        value={value}
        onValueChange={onValueChange}
        aria-label={ariaLabel}
        placeholder={placeholder}
        inputClassName={className}
        autoFocus={autoFocus}
        iconButtonVariant="ghost"
        popoverAlign="end"
      />
    )
  }

  if (mask) {
    return (
      <MaskedInput
        id={id}
        mask={MASK_BY_KIND[mask]}
        aria-label={ariaLabel}
        placeholder={placeholder}
        value={value}
        onChange={e => onValueChange(e.target.value)}
        className={className}
        autoFocus={autoFocus}
      />
    )
  }
  return (
    <Input
      id={id}
      type="text"
      aria-label={ariaLabel}
      placeholder={placeholder}
      value={value}
      onChange={e => onValueChange(e.target.value)}
      className={className}
      autoFocus={autoFocus}
    />
  )
}