import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Checkbox from '..........';

export default class Test extends Component {

    state = {
        allItems: [],
        selectedItems: []
    };

    onChange = (event) => {
        const { name, checked } = event.currentTarget;

        if (checked) {
            this.setState(prevState => ({
                selectedItems: [...prevState.selectedItems, name]
            }));
        } else {
            this.setState(prevState => ({
                selectedItems: prevState.selectedItems.filter(item => item !== name)
            }));
        }
    }

    isInSelectedItem = (id) => {
        return this.state.selectedItems.includes(id);
    }

    renderCheckboxes =() => {
        return (
            <div>
                {this.state.allItems.map(item => (
                    <Checkbox
                        key={item.name}
                        name={item.name}
                        id={item.name}
                        checked={this.isInSelectedItem(item.name)}
                        onChange={this.onChange}
                    />
                ))}
            </div>
        );
    }

    render() {
        return (
            <div>
                { this.renderCheckboxes() }
            </div>
        );
    }

}