import React from 'react';
import { ImagenesRutas } from '../../../request/RutasConfig.jsx';

function HeaderEmpresaInt(props) {

    const largoEmpresa =(value)=>{
        let _lista= props.lista.filter(item => item.Id == value);;
        const pLargo = (_lista.length> 0 ) ? _lista[0].Nombre.length : 0 ;
    return pLargo;
    }


    const Select = ({ containerClass, label, name, value, disabled, children, onChange }) => (
        <div className={containerClass}>
            <div className="row">
                <div className="col-sm-12">
                    <label className="text-bold text-large"> {label} </label>
                    <select style={{width: `${(8* (largoEmpresa(value))) + 75}px`}} className="form-control" name={name} value={value} disabled={disabled} onChange={onChange} id={name}>
                        {children}
                    </select>
                </div>
            </div>
        </div>
    );

    const onChange = (e) => {

        const name = e.target.name;
        const value = e.target.value;
        props.onChange({ name, value });
    }
    const opcionesEmpresa = props.lista.map(dato => <option key={dato.Id} value={dato.Id}>{dato.Nombre}  </option>);

    return (
        <div className="row">
            <div className="col-xs-6">
                <img className="logo-ld" src={ImagenesRutas.Logo} alt="Logical Data" />
            </div>
            <div className="col-xs-4">
                <Select containerClass="empresa-actual margin-top-20"
                    label={"Empresa:"}
                    name="empresaId"
                    value={props.empresaId}
                    disabled=""//disabled={disabled.AlmacenFiscal ? "disabled" : ""}
                    onChange={onChange}
                    lista ={props.lista}>
                    {opcionesEmpresa}
                </Select>
            </div>
            <div className="col-xs-2">
                <h2>{props.nombreSistema}</h2>
            </div>
        </div>
    );
};
export default HeaderEmpresaInt