import React, { useCallback, useMemo, useState } from 'react';
import { TextField, List, ListItem, ListItemText, makeStyles, Chip, Divider } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
const useStyles = makeStyles((theme) => ({
    root: {},
    input: {
        height: 34,
        padding: 0
    },
    formTextInput: {
        fontSize: 14
    },
    labelRoot: {
        fontSize: 14
    },
    chipContainer: {
        marginRight: theme.spacing(1)
    },
    divider: { width: '100%' }
}));
export const ListSearch = (props) => {
    const { items, onClick, contentKey = 'content', tagKey = 'code', includeTags = 'false', searchLabel = 'Search', maxHeight = 400 } = props;
    const [searchText, setSearchText] = useState('');
    const classes = useStyles(props);
    const { t } = useTranslation();
    const filteredItems = useMemo(() => {
        if (!items.length) {
            return [];
        }
        return items === null || items === void 0 ? void 0 : items.filter((item) => {
            var _a, _b;
            if ((_a = item[contentKey]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchText === null || searchText === void 0 ? void 0 : searchText.toLowerCase())) {
                return true;
            }
            if (includeTags &&
                ((_b = item[tagKey]) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchText === null || searchText === void 0 ? void 0 : searchText.toLowerCase()))) {
                return true;
            }
            return false;
        });
    }, [searchText, items, contentKey, tagKey, includeTags]);
    const handleSearchChange = (event) => {
        setSearchText(event.target.value);
    };
    const handleOnClick = useCallback((value) => {
        if (onClick) {
            onClick(value);
        }
    }, [onClick]);
    return (React.createElement("div", { className: classes.root }, React.createElement(TextField, { label: t(`${searchLabel}`), value: searchText, onChange: handleSearchChange, fullWidth: true, variant: "outlined", size: "small", margin: "dense", InputProps: {
            classes: {
                root: classes === null || classes === void 0 ? void 0 : classes.input,
                input: classes === null || classes === void 0 ? void 0 : classes.formTextInput
            }
        }, InputLabelProps: {
            classes: {
                root: classes === null || classes === void 0 ? void 0 : classes.labelRoot
            }
        } }), React.createElement(List, { style: { maxHeight: maxHeight, overflow: 'auto', overflowX: 'hidden' } }, filteredItems.map((item, index) => (React.createElement(React.Fragment, null, React.createElement(ListItem, { button: true, onClick: () => handleOnClick(item[contentKey]), key: index, disableGutters: true }, includeTags && (React.createElement("div", { className: classes.chipContainer }, React.createElement(Chip, { label: item[tagKey], color: "primary", variant: "outlined" }))), React.createElement(ListItemText, { primary: item[contentKey] })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "horizontal" }))))))));
};
//# sourceMappingURL=ListSearch.js.map