import React, { Fragment } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Botones from './headerBotones.js';




function formBotones(props) {
    const { col, attributes, botones} = props;
    const stilo = { display: !!attributes.hidden ? attributes.hidden : 'unset', float: attributes.float ==undefined ? 'left' : attributes.float };
    const stiloBN ={float: attributes.float ==undefined ? 'left' : attributes.float };
    return (
        <div className={"col-sm-" + col + " col-md-" + col} style={stilo}>
            <div className="form-groupBN" style={stiloBN}>
                <div className="row">
                <Botones
                    botones={botones}
            />
                </div>
            </div>
        </div>
    )
};
export default formBotones;

//  function formBotones(props) {
//     const { col, attributes, botones} = props;
//     const stilo = { display: !!attributes.hidden ? attributes.hidden : 'unset', float: attributes.float ==undefined ? 'left' : attributes.float };


//     const Boton = ({ name, clase, evento, leyenda, iclase, indice, tooltip }) => {
//         const _clase = (tooltip !== undefined) ? (tooltip.length !== 0) ? "tooltiptext2" : "" : "";
    
//         return (
//             <div key={indice} className="tooltip2"><span className={_clase}>{tooltip}</span>                          
//                 <a key={indice} id={name} type="button" className={clase} onClick={evento}><FontAwesomeIcon icon={iclase}/>{leyenda}</a>
//             </div>
//         )
//     }
    
//     //<button id="btnVerArbol" type="button" className="btn pull-right flipInX animated" onClick={this.onClickVerArbol}><FontAwesomeIcon icon={faAngleDoubleLeft} style={iClase} /></button>
    
    
//     const SelectBotones = ({ botones }) => {
    
//         return botones.map((item, index) => {
//             //const _clase =   (item.tooltip !== undefined) ? (item.tooltip.length  !== 0  ) ? "tooltiptext2" : "" : "";  
//             return <Boton key={index}
//                 name={item.name}
//                 clase={item.clase}
//                 evento={item.evento}
//                 leyenda={item.leyenda}
//                 iclase={item.iclase}
//                 indice={index}
//                 tooltip={item.tooltip}
//             />
//         })
//     }




//     return (
//         <div className={"col-sm-" + col + " col-md-" + col} style={stilo}>
//             <div className="form-groupBN">
//                 <div className="row">
//                 <SelectBotones
//                 botones={botones}
//             />
//                 </div>
//             </div>
//         </div>
//     )
// };
// export default formBotones;