import { useDebounce } from "@wordpress/compose";
import { useCallback, useEffect, useState } from "react";
import { TextControl } from "../wp";

interface FilterSearchControlProps {
  label: string;
  onChange: (value: string) => void;
  onPendingChange?: (isPending: boolean) => void;
  placeholder: string;
  value: string;
}

export const FilterSearchControl = ({
  label,
  onChange,
  onPendingChange,
  placeholder,
  value,
}: FilterSearchControlProps) => {
  const [inputValue, setInputValue] = useState(value);
  const commitValue = useCallback(
    (nextValue: string) => {
      onChange(nextValue);
      onPendingChange?.(false);
    },
    [onChange, onPendingChange],
  );
  const debouncedOnChange = useDebounce(commitValue, 800);

  useEffect(() => {
    setInputValue(value);
    onPendingChange?.(false);
  }, [onPendingChange, value]);

  useEffect(() => {
    if (inputValue !== value) {
      debouncedOnChange(inputValue);
    }
  }, [debouncedOnChange, inputValue, value]);

  return (
    <TextControl
      __next40pxDefaultSize
      __nextHasNoMarginBottom
      label={label}
      onChange={(nextValue) => {
        setInputValue(nextValue);
        onPendingChange?.(nextValue !== value);
      }}
      placeholder={placeholder}
      value={inputValue}
    />
  );
};