import { Search, X } from "lucide-react";
import type { DictionaryName } from "../dictionaries/dictionaryTypes";
import { useDictionaries } from "../dictionaries/dictionaryContext";

interface SelectFilter {
  dictionary: DictionaryName;
  value: string;
  emptyLabel: string;
  ariaLabel: string;
  onChange: (value: string) => void;
}

export function DocumentSearchToolbar({
  ariaLabel,
  keyword,
  keywordPlaceholder,
  updatedFrom,
  updatedTo,
  selectFilter,
  error,
  onKeywordChange,
  onUpdatedFromChange,
  onUpdatedToChange,
  onClear,
  compact = false,
}: {
  ariaLabel: string;
  keyword: string;
  keywordPlaceholder: string;
  updatedFrom: string;
  updatedTo: string;
  selectFilter?: SelectFilter;
  error: string | null;
  onKeywordChange: (value: string) => void;
  onUpdatedFromChange: (value: string) => void;
  onUpdatedToChange: (value: string) => void;
  onClear: () => void;
  compact?: boolean;
}) {
  const dictionaries = useDictionaries();
  const inputClass = compact
    ? "h-8 px-2 text-xs font-bold border outline-none"
    : "h-8 px-2 text-sm font-bold border outline-none";

  return (
    <div
      aria-label={ariaLabel}
      className="flex flex-wrap items-end gap-2 p-2"
      style={{ color: "#1A5299", background: "#FFFFFF" }}
    >
      <label className="flex items-center gap-2">
        <Search size={14} style={{ color: "#3191eb" }} />
        <input
          aria-label={`${ariaLabel}关键词`}
          value={keyword}
          onChange={(event) => onKeywordChange(event.target.value)}
          placeholder={keywordPlaceholder}
          className={`${inputClass} ${compact ? "w-72" : "w-80"}`}
          style={{ borderColor: "rgba(40,118,193,.25)" }}
        />
      </label>
      {selectFilter && (
        <select
          aria-label={selectFilter.ariaLabel}
          value={selectFilter.value}
          onChange={(event) => selectFilter.onChange(event.target.value)}
          className={inputClass}
          style={{ borderColor: "rgba(40,118,193,.25)" }}
        >
          <option value="">{selectFilter.emptyLabel}</option>
          {dictionaries.options(selectFilter.dictionary).map((option) => (
            <option key={option.code} value={option.code}>{option.label}</option>
          ))}
        </select>
      )}
      <label className="text-[11px] font-bold">
        <span className="block mb-1">更新时间从</span>
        <input
          aria-label={`${ariaLabel}更新时间从`}
          type="datetime-local"
          value={updatedFrom}
          onChange={(event) => onUpdatedFromChange(event.target.value)}
          className={inputClass}
          style={{ borderColor: "rgba(40,118,193,.25)" }}
        />
      </label>
      <label className="text-[11px] font-bold">
        <span className="block mb-1">更新时间至</span>
        <input
          aria-label={`${ariaLabel}更新时间至`}
          type="datetime-local"
          value={updatedTo}
          onChange={(event) => onUpdatedToChange(event.target.value)}
          className={inputClass}
          style={{ borderColor: "rgba(40,118,193,.25)" }}
        />
      </label>
      <button
        type="button"
        onClick={onClear}
        className="h-8 px-3 text-xs font-black border"
        style={{ color: "#1A5299", borderColor: "#3191eb" }}
      >
        <X size={12} className="inline mr-1" />清空条件
      </button>
      {error && (
        <span role="alert" className="w-full text-xs font-black text-red-600">
          {error}
        </span>
      )}
    </div>
  );
}
