import React from 'react';
import toClassName from 'classnames';
import { isFunction, isObj, isString } from 'exotic';
import { Button, CloseIcon as CrossIcon } from '@skava/packages/ui';
import { searchContainer as container, wording } from './state';
import { SuggestedItemContainer, SearchTextBar, SearchTerm, SearchContext, SearchPre, } from './styled';
/**
 * @todo @@perf remve duplication
 */
const stripWhitespace = (x) => x.replace(/\s+/g, '');
/**
 * @todo data layer
 * @todo split wording
 *
 * @example
 * {
 *    pre: 'skinny',
 *    text: 'Denim Jeans',
 *    post: 'blue',
 *
 * }
 */
// eslint-disable-next-line
function toContextual(props) {
    const { text } = props;
    if (isObj(text)) {
        return text;
    }
    else if (isString(text) && text.includes('|||')) {
        let pre = '';
        if (text.includes('<<<')) {
            pre = text.split('<<<')[0];
        }
        const parts = text.split('|||');
        let context = ' in ' + parts[1];
        let contextShort = parts[1].split(' ').join('');
        if (stripWhitespace(context) === 'in') {
            context = ' ';
            contextShort = '';
        }
        const keyword = parts[0] || '';
        const isContextSameAsSearch = keyword.toLowerCase().includes('jeans');
        const result = {
            pre,
            text: keyword,
            context,
            contextShort,
            isContextSameAsSearch,
        };
        // console.debug('SEARCH_ITEM_WORDS', result)
        return result;
    }
    else {
        return { text, context: '', pre: '', post: '', isContextSameAsSearch: false, contextShort: '' };
    }
}
/**
 * @todo Button atom
 * @todo !!! observer > state, or update 1 level up
 */
class SearchItem extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            isRemoved: false,
        };
        /**
         * @todo smooth animate away like gmail
         * @param {ReactClipboardEventHandler}
         * @type {React.EventHandler}
         */
        this.handleRemoveRecentItem = (event) => {
            const { text } = this.props;
            container.handleRemoveRecentItem(text, event);
            this.setState({ isRemoved: true });
        };
    }
    get words() {
        return toContextual({ ...this.props });
    }
    static fromClosable(text) {
        return React.createElement(SearchItem, { hasClose: true, text: text, key: text });
    }
    static from(text) {
        return React.createElement(SearchItem, { text: text, key: text });
    }
    render() {
        const { isRemoved } = this.state;
        const { text, context, pre, isContextSameAsSearch, contextShort } = this.words;
        const { onClick, hasClose } = this.props;
        const searchText = text + contextShort;
        const suggestionText = wording.noSearchSuggestion;
        const searchHandleClick = searchText !== suggestionText && container.handleOnClickFor(searchText);
        const handleClick = isFunction(onClick) ? onClick : searchHandleClick;
        const close = hasClose && (React.createElement(Button, { onClick: this.handleRemoveRecentItem },
            React.createElement(CrossIcon, { className: 'sk-cross-icon', gray: true })));
        if (isRemoved === true) {
            return '';
        }
        const dynamic = {
            'has-context': context,
            'no-context': !context,
            'same-context': isContextSameAsSearch,
            'different-context': !isContextSameAsSearch,
        };
        const className = toClassName('search-suggestion-term search-suggestion-item term ', dynamic);
        return (React.createElement(SuggestedItemContainer, { "search-original-keyword": searchText, "aria-label": searchText, tabIndex: -1, onClick: () => handleClick(text) },
            React.createElement(SearchTextBar, { onClick: handleClick, tabIndex: 0 },
                React.createElement(SearchPre, null, pre),
                React.createElement(SearchTerm, { className: className }, text),
                React.createElement(SearchContext, null, context)),
            close));
    }
}
SearchItem.defaultProps = {
    text: 'men',
    onClick: undefined,
    hasClose: false,
};
export { SearchItem };
export default SearchItem;
//# sourceMappingURL=SearchItem.js.map