import React from 'react';
import { useState, useEffect } from 'react';
import ReactAutocomplete from 'react-autocomplete';
import { Input, Card, CardBody } from '@nimles/react-web-components';
import styled from '@emotion/styled';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@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.div `
  position: relative;
`;
const ClearButton = styled.button `
  position: absolute;
  top: 20px;
  right: 0;
  background: transparent;
  border: none;
  outline: none;
  padding-right: 10px;
  color: grey;
  cursor: pointer;
`;
export const FacetAutoComplete = ({ availableFacets, selectedFacet, onSelect, }) => {
    const [value, setValue] = useState(selectedFacet || '');
    useEffect(() => {
        setValue(selectedFacet);
    }, [selectedFacet]);
    return (<ReactAutocomplete getItemValue={(item) => String(item.value)} items={sortBy(availableFacets, 'value')} renderInput={(props) => (<InputContainer>
          <Input {...props}/>
          <ClearButton onClick={() => onSelect(undefined)}>
            <FontAwesomeIcon icon={faTimes}/>
          </ClearButton>
        </InputContainer>)} renderMenu={(items, value, style) => (<Card>
          <CardBody style={Object.assign({}, style)} children={items}/>
        </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}/>);
};
//# sourceMappingURL=FacetAutoComplete.jsx.map