import "./AssetsSearch.scss";

import React, {Component} from "react";
import classNames from "classnames";
import {Provider} from 'sbx-react-core';
import Dropdown from "sbx-react-dropdown";

import SearchItem from "./components/SearchItem";

import Lang from 'components/Language';

@Provider({
    assets: ['assets'],
    groups: ['groups'],
    settings: ['settings']
})

export default class AssetsSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            symbols: this.filterSymbols(Object.keys(this.props.assets)),
            searchString: "",
            isOpen: false,
            active: false
        };
    }
    __onFocus = () => {
        const {searchString} = this.state;
        if(!searchString.length) {
            this.setState({symbols: this.filterSymbols(Object.keys(this.props.assets))})
        } else {
            this.__onSearch(searchString)
        }
        this.setState({isOpen: true})
    };
    __onBlur = () => {
        this.setState({isOpen: false, symbols: []})
    };
    __onSearch = value => {
        // const symbols = this.filterSymbols(Object.keys(this.props.assets));
        const {assets} = this.props;

        let filterAssets = Object.values(assets).filter(asset => !asset.hidden);
        let result = [];

        filterAssets.forEach(asset => {
            if(asset.symbol.toLowerCase().includes(value.toLowerCase()) || asset.description.toLowerCase().includes(value.toLowerCase())) {
                result.push(asset.symbol)
            }
        });
        this.setState({searchString: value.trim(), symbols: result})
    };


    __onClose = () => {
        this.setState({
            symbols: [],
            searchString: "",
            isOpen: false
        });
        this.dropdown.hide();
    };
    filterSymbols = symbols => {
        const {assets} = this.props;
        return symbols.filter(symbol => !assets[symbol].hidden);
    };

    setActive = symbol => {
        this.setState({active: symbol})
    };
    render() {
        const {symbols, isOpen, searchString, active} = this.state;
        const {inputAnimate, settings = {}} = this.props;
        return (
            <div className="assets-search">
                <Dropdown
                    onClickOutside={() => {
                        isOpen && this.__onClose();
                    }}
                    ref={e => this.dropdown = e}
                    position="bottom_left"
                    data={
                        symbols.length > 0 &&
                        <div className="assets-search-list">
                            {
                                symbols.map(symbol => {
                                    return <SearchItem
                                        symbol={symbol}
                                        searchString={searchString}
                                        active={active === symbol}
                                        onEnter={this.setActive}
                                        onSelect={symbol => {
                                            this.props.onSelect && this.props.onSelect(symbol);
                                            this.__onClose();
                                        }}
                                        // onActionClick={() => {
                                        //     this.setState({isOpen: false}, () => {
                                        //         this.dropdown.hide()
                                        //     })
                                        // }}
                                    />
                                })
                            }
                        </div>
                    }
                >
                    <div className="input-wrapper">
                        <input
                            type="text"
                            className={classNames({
                                "animate": inputAnimate
                            })}
                            value={searchString}
                            placeholder={settings.defaultPlaceholderSearch || 'EURUSD..'}
                            onFocus={this.__onFocus}
                            onInput={e => {
                                const {value} = e.target;
                                this.__onSearch(value)
                            }}
                        />
                    </div>
                </Dropdown>
                <div
                    className={classNames({
                        "input-background": true,
                        "input-background-search": !isOpen,
                        "input-background-close": isOpen
                    })}
                    onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        isOpen && this.__onClose();
                    }}
                />
            </div>
        )
    }
}