<Panel onClick={this.onSelectRooms} className={this.state.selectedRooms.includes() ? 'bg-success' : ''}>

export default class ExportReportRoomSelectionModal extends React.Component {

    constructor(props) {
        super(props);

        const roomOrder = configContext.value.roomOrder;

        this.state = {
            rooms: roomOrder,
            selectedRooms: []
        };

        this.onSelectRooms = this.onSelectRooms.bind(this);

    }

    onSelectRooms = (e) => {

        const { selectedRooms } = this.state;
        const { id } = e.target;

        //remove roomId

        if(selectedRooms.includes(id)) {
            this.setState({
                selectedRooms: selectedRooms.filter((name) => name !== id)
            });

        //add roomId
        } else{
            this.setState({
                selectedRooms: [...selectedRooms, id]
            });
        }
    }


    render() {


        return (
            <Modal}>
                <Modal.Header closeButton>
                    <Modal.Title>Print PDF</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Number of rooms: {this.state.rooms.length}</p>
                    <p>Rooms:</p>

                    <Grid fluid={true}>
                        <Row className="show-grid">
                            { this.state.rooms.map((name, i ) =>

                                <Col key={i}>
                                    <Panel onClick={this.onSelectRooms} className={this.state.selectedRooms.includes() ? 'bg-success' : ''}>
                                        <Panel.Heading id={name}>
                                            {name}
                                        </Panel.Heading>
                                    </Panel>
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>
                <Modal.Footer>

            </Modal>);
    }
}