import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Input} from 'reactstrap';
import '../style/OrdersList.css';
import {setViewAllOrdersFlag} from '../../../actions/orders/ordersActions';
import {orderTexts} from '../../../constants/ordersConstants';

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

        this.state = {
            isViewAllOrdersChecked: false
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    componentDidMount() {
        const isViewAllChecked = {};
        isViewAllChecked[this.props.params] = this.state.isViewAllOrdersChecked;
        this.props.dispatch(setViewAllOrdersFlag(isViewAllChecked));
    }

    handleInputChange(e) {
        this.setState({
            isViewAllOrdersChecked: !this.state.isViewAllOrdersChecked
        });
        const isViewAllChecked = {};
        isViewAllChecked[this.props.params] = e.target.checked;
        this.props.dispatch(setViewAllOrdersFlag(isViewAllChecked));
    }

    render() {
        const {isCompanyAdmin} = this.props;

        return (
            <Row id="view-all-orders-checkbox">
                {isCompanyAdmin &&
                    <Col xl="10">
                        <Input type="checkbox"
                            name="isViewAllOrdersChecked"
                            checked={this.state.isViewAllOrdersChecked}
                            onChange={this.handleInputChange}
                            className="view-all-orders-checkbox" />
                        <span className="view-all-orders-text">{orderTexts.labels.VIEW_ALL_ORDERS}</span>
                    </Col>
                }
            </Row>
        );
    }
}

const mapStateToProps = (state) => ({
    isCompanyAdmin: state.auth.isCompanyAdmin
});
export default connect(mapStateToProps)(OrderListHeader);