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

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

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

    }
    componentDidMount() {
        this.props.dispatch(fetchShopCommercialLeads());

        if(this.props.commercialLeads && this.props.cartItems && this.props.activeModule==='cart'){
            const cl = this.props.commercialLeads.find((cl) => {return cl.idCommercialLead===this.props.cartItems[0].idCommercialLead});
            this.props.dispatch(selectCommercialLead(cl));
        }
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.activeModule==='cart' && nextProps.commercialLeads && nextProps.cartItems && nextProps.cartItems.length > 0){
            const cl = nextProps.commercialLeads.find((cl) => {return cl.idCommercialLead===nextProps.cartItems[0].idCommercialLead});
            nextProps.dispatch(selectCommercialLead(cl));
        }

        if(nextProps.commercialLeads && nextProps.idCommercialLead && nextProps.activeModule === 'co-market'){
            const cl = nextProps.commercialLeads.find((cl) => {return cl.idCommercialLead===nextProps.idCommercialLead});
            nextProps.dispatch(selectCommercialLead(cl));
        }
    }

    handleClChange(cl) {
        this.props.dispatch(selectCommercialLead(cl));
        this.props.dispatch(fetchShopPackages(cl));
    }

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

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

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

const mapStateToProps = (state) => ({
    commercialLeads: state.coMarketPackagesReducer.commercialLeads,
    selectedCommercialLead: state.coMarketPackagesReducer.selectedCommercialLead,
    idPackage: state.coMarketReducer.idPackage,
    cartItems: state.cartReducer.cartItems,
    activeSubmodule: state.pageReducer.activeSubmodule
});

export default connect(mapStateToProps)(CoMarketCatalogSelect);
