import { InputAdornment, TextField } from '@mui/material';
import { memo, useEffect, useRef, useState } from 'react';
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 memo(SearchComponent);