import React, { Fragment, useState } from 'react';
import { ImagenesRutas } from '../../../request/RutasConfig.jsx';
import LogoLD from '../../../ui/LogoLD.jsx'
import { FaChevronDown, FaUserCircle, FaWatchmanMonitoring, FaLaptop } from 'react-icons/fa';
import { IoArrowBack } from 'react-icons/io5';

function HeaderEmpresaInt(props) {
    const [permisos, setPermisos] = useState(true);

    const Select = ({ clase, name, value, disabled, children, onChange }) => (
        <div >

            <select className={clase} name={name} value={value} autosize={true} disabled={disabled} onChange={onChange} id={name} >
                {children}
            </select>

        </div>
    );

    const onChange = (pId, pNombre) => {
        props.onChange(pId, pNombre)
    }

    const opcionesEmpresa = props.lista.map(dato => <button onClick={() => { onChange(dato.Id, dato.Nombre) }} className={`fondoSistemas ${props.SelNombre === dato.Nombre && 'seleccionado'}`} key={dato.Id}><FaLaptop /> {dato.Nombre} </button>);

    return (
        <Fragment>
            <div className={`ld-main-header-logo ${props.mostrarLista && "hideImg"}`}>
                <LogoLD fill='#fff' />
            </div>

            <div className='rightDivHeader'>

                {props.mostrarLista &&
                    <div className='ld-main-header-user systems-cb'>
                        <span className={!permisos ? 'invisible' : ''}>
                            <a >
                                <FaLaptop className='ms-2' />
                                <span> {props.SelNombre} </span></a>
                        </span>
                        <FaChevronDown className='ms-2' />
                        <div className='ld-main-header-user-sm'>
                            {opcionesEmpresa}
                        </div>
                    </div>}

                <div className='ld-main-header-user leftBorder'>

                    <span className={!permisos ? 'invisible' : ''}>
                        <a ><img className='menu-adm' src={(props.imagenUsuario.trim().length == 0 ? ImagenesRutas.userMenu : props.imagenUsuario)} /><span>{` ${props.usuario} `}</span></a>
                    </span>
                    <FaChevronDown className='ms-2' />
                    <div className='ld-main-header-user-sm'>
                        <button className='fondoSesion' onClick={props.onCerrarSesion}><IoArrowBack className='me-4' /> Cerrar sesión</button>
                    </div>
                </div>
            </div>

        </Fragment>

    );
};
export default HeaderEmpresaInt