import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import Fuse from 'fuse.js';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '../../../components/ui/text-field';
import { I18nContext } from '../../../contexts/i18n';
import SearchIcon from '../../../components/ui/search-icon';
import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
export default function SettingsSearch({
onSearch,
error,
settingsRoutesList,
}) {
const t = useContext(I18nContext);
const [searchQuery, setSearchQuery] = useState('');
const [searchIconColor, setSearchIconColor] = useState(
'var(--color-icon-muted)',
);
const settingsRoutesListArray = Object.values(settingsRoutesList);
const settingsSearchFuse = new Fuse(settingsRoutesListArray, {
shouldSort: true,
threshold: 0.2,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: ['tab', 'section', 'description'],
});
// eslint-disable-next-line no-shadow
const handleSearch = (_searchQuery) => {
const sanitizedSearchQuery = _searchQuery.replace(/[^A-z0-9\s]|[\\]/gu, '');
setSearchQuery(sanitizedSearchQuery);
if (sanitizedSearchQuery === '') {
setSearchIconColor('var(--color-icon-muted)');
} else {
setSearchIconColor('var(--color-icon-default)');
}
const fuseSearchResult = settingsSearchFuse.search(sanitizedSearchQuery);
const addressSearchResult = settingsRoutesListArray.filter((routes) => {
return (
routes.tab &&
sanitizedSearchQuery &&
isEqualCaseInsensitive(routes.tab, sanitizedSearchQuery)
);
});
const results = [...addressSearchResult, ...fuseSearchResult];
onSearch({ searchQuery: sanitizedSearchQuery, results });
};
const renderStartAdornment = () => {
return (
);
};
const renderEndAdornment = () => {
return (
<>
{searchQuery && (
handleSearch('')}
style={{ cursor: 'pointer' }}
>
)}
>
);
};
return (
handleSearch(e.target.value)}
error={error}
fullWidth
autoFocus
autoComplete="off"
startAdornment={renderStartAdornment()}
endAdornment={renderEndAdornment()}
/>
);
}
SettingsSearch.propTypes = {
onSearch: PropTypes.func,
error: PropTypes.string,
settingsRoutesList: PropTypes.array,
};