import { useEffect, useRef, useState } from 'react';
import { TextField, InputAdornment } from '@mui/material';
import { Search } from './icons/icons';

function SearchComponent({
  placeholder = 'Поиск...',
  value = '',
  onChange,
  debounceMs = 0,
  height = '2rem',
  sx: sxProp,
  ...rest
}) {
  const [inputValue, setInputValue] = useState(value);
  const onChangeRef = useRef(onChange);

  useEffect(() => {
    onChangeRef.current = onChange;
  }, [onChange]);

  useEffect(() => {
    setInputValue(value);
  }, [value]);

  useEffect(() => {
    if (!debounceMs) return;
    const timer = setTimeout(() => {
      if (inputValue !== value) {
        onChangeRef.current(inputValue);
      }
    }, debounceMs);
    return () => clearTimeout(timer);
  }, [inputValue, debounceMs, value]);

  const handleChange = (e) => {
    const next = e.target.value;
    setInputValue(next);
    if (!debounceMs) {
      onChange(next);
    }
  };

  return (
    <TextField
      {...rest}
      size="small"
      placeholder={placeholder}
      value={inputValue}
      onChange={handleChange}
      sx={{
        minWidth: '20rem',
        maxWidth: '100%',
        width: '100%',
        flex: 1,
        ...sxProp,
        '& .MuiOutlinedInput-root': {
          height: height,
          maxHeight: '5rem',
          borderRadius: '0.5rem',
          backgroundColor: '#fff',
          padding: '0.25rem 0.75rem',
          '& fieldset': {
            border: '0.06rem solid rgba(0, 0, 0, 0.1)',
          },
          '&.Mui-focused fieldset': {
            borderWidth: '0.1rem',
          },
        },
        '& .MuiOutlinedInput-input': {
          padding: 0,
        },
      }}
      slotProps={{
        input: {
          startAdornment: (
            <InputAdornment position="start">
              <Search />
            </InputAdornment>
          ),
        },
      }}
    />
  );
}

export default SearchComponent;
