import React, {Component} from 'react';
import {Row, Col, Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
import PackageOptionItemContainer from './PackageOptionItemContainer';
import {connect} from 'react-redux';

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

        this.toggleDropdown = this.toggleDropdown.bind(this);
        this.state = {
            dropdownOpen: false
        };
    }

    toggleDropdown(groupKey) {
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
       });
    }

    getClass() {
        if (this.props.selectedOptions && this.props.selectedOptions[this.props.group.idGroup]) {
            return 'shop-package-option-selected';
        }
        return undefined;
    }

    render() {
        const {group, currency, selectedOptions} = this.props;
        const selectedGroupOption = selectedOptions ? selectedOptions[group.idGroup] : undefined;

        return (
            <div key={'group-' + group.idGroup} className={this.getClass()}>
                <Dropdown
                    isOpen={this.state.dropdownOpen}
                    toggle={this.toggleDropdown}
                    className="w-100">
                    <DropdownToggle
                    caret
                    className="w-100 d-flex justify-content-between align-items-center"
                    tag="div"
                    >
                        <div className="d-flex flex-column flex-grow-1">
                            <small className="shop-package-option-header"> {group.groupName}:</small>
                            {
                                selectedGroupOption ?
                                    (<PackageOptionItemContainer
                                        option={selectedGroupOption}
                                        currency={currency}
                                        idGroup={group.idGroup}
                                        simplified
                                    />) :
                                    (<span>Select ...</span>)
                            }
                        </div>
                    </DropdownToggle>
                    <DropdownMenu className="w-100">
                        {
                            group.options.map(option => {
                                return (<PackageOptionItemContainer
                                    key={option.idOptionPackage}
                                    option={option}
                                    currency={currency}
                                    idGroup={group.idGroup}/>)
                            })
                        }
                    </DropdownMenu>
                </Dropdown>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
    selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions
});

export default connect(mapStateToProps) (PackageOptionGroup);
