import React, {Component} from 'react';
import {Row, Col} from 'reactstrap';
import {orderTexts} from '../../../constants/ordersConstants';

class PackageNav extends Component {
    getClass(packageName) {
        return this.props.params.packageNameFilter === packageName ? 'process-nav-div selected-nav' : 'process-nav-div';
    }

    render() {
        const {packages, onPackageFilter} = this.props.params;

        return (
            <Row id="process-nav" className="process-nav">
                <Col xl="1" lg="2" md="3" sm="12" xs="12" className="process-nav-buttons">
                    <div className="wiaas-main-title">
                        {orderTexts.labels.PACKAGES}
                    </div>
                </Col>
                <Col xl="9" lg="9" md="4" xs="12" className="process-menu">
                    <div className={this.getClass('all')} onClick={()=>{onPackageFilter('all')}}>{orderTexts.buttons.ALL}</div>
                        {
                            packages.length > 0 &&
                            packages.map((orderPackage) => <div key={'menu-package-' + orderPackage.id}
                                onClick={()=>{onPackageFilter(orderPackage.name)}}
                                className={this.getClass(orderPackage.name)}>{orderPackage.name}</div>)
                        }
                </Col>

            </Row>
        );
    }
}

export default PackageNav;
