import React, { Fragment, useEffect, useState,useRef } from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';

const arbolCheck = (props) => {

    //const _cascada = (props.noCascada ==undefined) ? false :  props.noCascada;
    const _Scroll = (props.MostrarScroll != undefined) ? ((props.MostrarScroll == true) ? 'overflowTree' : '') : '';
  

    return (
        <Fragment>
            <div className={"col-sm-" + props.col + " col-md-" + props.col}>
                <div className="form-group">

                    <label htmlFor={props.id}>{props.label}</label>
                    <div className="row">
                        <div className='filter-containerCK'>
                            <input
                                className="filter-text"
                                placeholder="Search...778"
                                type="text"
                                value={props.filterText}
                                onChange={props.onFilterChange}
                            />
                            <div className={`${_Scroll}`}>
                                <CheckboxTree
                                    nodes={props.ListaDatos}
                                    checked={props.checked}
                                    expanded={props.expanded}
                                    onCheck={(checked, targetNode) => props.onCheck(checked, targetNode)}
                                    onExpand={expanded => props.onExpand(expanded)}
                                    noCascade={(props.noCascada == undefined) ? false : props.noCascada}
                                    showExpandAll={(props.showExpandAll == undefined) ? false : props.showExpandAll}
                                    onClick={props.onClick}
                                />
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </Fragment>
    );
};
export default arbolCheck;