"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FacetAutoComplete = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
const react_autocomplete_1 = __importDefault(require("react-autocomplete"));
const react_web_components_1 = require("@nimles/react-web-components");
const styled_1 = __importDefault(require("@emotion/styled"));
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const compare = (property, descending) => {
    return (a, b) => {
        const aProperty = a[property];
        const bProperty = b[property];
        if (typeof aProperty === 'number' && typeof bProperty === 'number') {
            return aProperty - bProperty;
        }
        if (aProperty < bProperty) {
            return descending ? 1 : -1;
        }
        if (aProperty > bProperty) {
            return descending ? -1 : 1;
        }
        return 0;
    };
};
const sortBy = (array, property, descending) => array.sort(compare(property, descending));
const InputContainer = styled_1.default.div `
  position: relative;
`;
const ClearButton = styled_1.default.button `
  position: absolute;
  top: 20px;
  right: 0;
  background: transparent;
  border: none;
  outline: none;
  padding-right: 10px;
  color: grey;
  cursor: pointer;
`;
const FacetAutoComplete = ({ availableFacets, selectedFacet, onSelect, }) => {
    const [value, setValue] = (0, react_2.useState)(selectedFacet || '');
    (0, react_2.useEffect)(() => {
        setValue(selectedFacet);
    }, [selectedFacet]);
    return (<react_autocomplete_1.default getItemValue={(item) => String(item.value)} items={sortBy(availableFacets, 'value')} renderInput={(props) => (<InputContainer>
          <react_web_components_1.Input {...props}/>
          <ClearButton onClick={() => onSelect(undefined)}>
            <react_fontawesome_1.FontAwesomeIcon icon={free_solid_svg_icons_1.faTimes}/>
          </ClearButton>
        </InputContainer>)} renderMenu={(items, value, style) => (<react_web_components_1.Card>
          <react_web_components_1.CardBody style={Object.assign({}, style)} children={items}/>
        </react_web_components_1.Card>)} shouldItemRender={(item, value) => {
            console.log('Item: ', item);
            return (String(item.value)
                .toLowerCase()
                .indexOf(String(value).toLowerCase()) > -1);
        }} renderItem={(item, isHighlighted) => (<div key={item.value} style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
          {item.value}
        </div>)} value={value} onChange={(e) => setValue(e.target.value)} onSelect={onSelect}/>);
};
exports.FacetAutoComplete = FacetAutoComplete;
//# sourceMappingURL=FacetAutoComplete.jsx.map