import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Input} from 'reactstrap';
import {fetchShopPackages} from '../../actions/coMarket/coMarketPackagesActions';
import {coMarketTexts} from '../../constants/coMarketConstants';

class CoMarketNavContainer extends Component {
    constructor(props) {
        super(props);

        this.handleSearchChange = this.handleSearchChange.bind(this);
        this.state = {
            searchValue : ''
        };
    }

    handleSearchChange(event) {
        this.setState({searchValue: event.target.value});
        if (this.props.selectedShop) {
            this.props.dispatch(fetchShopPackages(this.props.selectedShop, event.target.value));
        }
    }

    render() {
        return (
            <Row className="co-market-nav">
                <Col className="col-auto co-market-nav-buttons">
                    <div className="co-market-nav-div">
                        {coMarketTexts.labels.NEW_PRODUCTS}
                    </div>
                    <div className="wiaas-divider"></div>
                </Col>
                <Col className="search-layer">
                    <div className="co-market-nav-div">
                        <i className="search-package-icon fa fa-search" aria-hidden="true"></i>
                        <Input className="wiaas-input" onChange={this.handleSearchChange} value={this.state.searchValue} placeholder={coMarketTexts.labels.SEARCH_PACKAGE}/>
                    </div>
                </Col>
            </Row>
        );
    }
}

const mapStateToProps = (state) => ({
    selectedShop: state.coMarketPackagesReducer.selectedShop
});

export default connect(mapStateToProps)(CoMarketNavContainer);