import React, {Component} from 'react';
import {connect} from 'react-redux';
import Select from 'react-select';
import {fetchShopPackages, fetchShops, selectShop} from '../../../actions/coMarket/coMarketPackagesActions';
import {coMarketTexts} from '../../../constants/coMarketConstants';

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

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

    }
    componentDidMount() {
        this.props.dispatch(fetchShops(this.props.userInfo.wiaas_id_user));

        if(this.props.shops && this.props.cartItems && this.props.activeModule==='cart'){
            const cartShop = this.props.shops.find( shop => { return shop.id===this.props.cartItems[0].idCommercialLead });
            this.props.dispatch(selectShop(cartShop));
        }
    }

    componentWillReceiveProps(nextProps){
        // if(nextProps.activeModule==='cart' && nextProps.shops && nextProps.cartItems && nextProps.cartItems.length > 0){
        //     const cartShop = this.props.shops.find( shop => { return shop.id === this.props.cartItems[0].idCommercialLead });
        //     nextProps.dispatch(selectShop(cartShop));
        // }

        if(nextProps.shops && nextProps.idCommercialLead && nextProps.activeModule === 'co-market'){
            const shop = nextProps.shops.find( shop => {return shop.id === nextProps.idCommercialLead });
            nextProps.dispatch(selectShop(shop));
        }
    }

    handleShopChange(shop) {
        this.props.dispatch(selectShop(shop));
        this.props.dispatch(fetchShopPackages(shop));
    }

    handleSearchChange(event) {
        this.setState({searchValue: event.target.value});

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

    render() {
        const {shops, selectedShop, idPackage, activeSubmodule} = this.props;
        const isDisabled = (idPackage || this.props.activeModule === 'cart') ? true : false;

        return (
            <div id="co-market-catalog">
                {
                    shops && activeSubmodule !== 'orders' &&
                    <div className="filters co-market-nav-div">
                        <div className="filter-name">{coMarketTexts.labels.CATALOGUE}:</div>
                            <Select value={selectedShop}
                                   name="commercialLead"
                                   className="filter-select"
                                   placeholder={coMarketTexts.labels.SELECT_CL}
                                   options={shops}
                                   disabled={isDisabled}
                                   clearable={false}
                                   onChange={shop => {this.handleShopChange(shop)}}
                           />
                    </div>
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    shops: state.coMarketPackagesReducer.shops,
    selectedShop: state.coMarketPackagesReducer.selectedShop,
    idPackage: state.coMarketReducer.idPackage,
    cartItems: state.cartReducer.cartItems,
    activeSubmodule: state.pageReducer.activeSubmodule,
    userInfo: state.auth.userInfo
});

export default connect(mapStateToProps)(CoMarketCatalogSelect);
