function HeadNF(props){
    return(
        <div id='cabecalhoNF' className='ui stackable equal width grid'>
            <div className='row'>
                <div className="column" id='emitente'>
                    <div className="ui segment">
                    <h4 className='ui blue dividing header'>EMITENTE</h4>
                        <div className="ui equal width compact grid">
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>CNPJ</div>
                                    {props.data.emitente.CNPJ}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Incrição Estadual</div>
                                    {props.data.emitente.IE}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Razão</div>
                                    {props.data.emitente.xNome}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Nome Fantasia</div>
                                    {props.data.emitente.xFant}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Endereço</div>
                                    {props.data.emitente.enderEmit.xLgr+", "+props.data.emitente.enderEmit.nro+" "+props.data.emitente.enderEmit.xCpl+", "+props.data.emitente.enderEmit.xBairro}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Localidade</div>
                                    {props.data.emitente.enderEmit.xMun+", "+props.data.emitente.enderEmit.UF+", CEP "+props.data.emitente.enderEmit.CEP}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="column" id='destinatario'>
                    <div className="ui segment">
                        <h4 className='ui blue dividing header'>DESTINATARIO</h4>
                        <div className="ui equal width compact grid">
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>CNPJ</div>
                                    {props.data.destinatario.CNPJ ? props.data.destinatario.CNPJ : props.data.destinatario.CPF}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Incrição Estadual</div>
                                    {props.data.destinatario.IE}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Razão</div>
                                    {props.data.destinatario.xNome}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Nome Fantasia</div>
                                    {props.data.destinatario.xFant}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Endereço</div>
                                    {props.data.destinatario.enderDest.xLgr+", "+props.data.destinatario.enderDest.nro+" "+props.data.destinatario.enderDest.xCpl+", "+props.data.destinatario.enderDest.xBairro}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Localidade</div>
                                    {props.data.destinatario.enderDest.xMun+", "+props.data.destinatario.enderDest.UF+", CEP "+props.data.destinatario.enderDest.CEP}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="column" id='transportador'>
                    <div className="ui segment">
                        <h4 className='ui blue dividing header'>TRANSPORTADOR</h4>
                        <div className="ui equal width compact grid">
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>CNPJ</div>
                                    {props.data.transportador.CNPJ}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Incrição Estadual</div>
                                    {props.data.transportador.IE}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Razão</div>
                                    {props.data.transportador.xNome}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Endereço</div>
                                    {props.data.transportador.xEnder}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Localidade</div>
                                    {props.data.transportador.xMun+", "+props.data.transportador.UF}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
        </div>
    )
}

function VolumeNF(props){

return(
    <div className="ui blue grid">
        <div className='row'>
                <div className="column" id='cabecalho'>
                    <div className='ui segment'>
                        <h4 className='ui blue dividing header'>DADOS DA NFe</h4>
                        <div className="ui stackable equal width internally celled grid">
                            <div className="row">

                                <div className="two wide column">
                                    <div className='ui tiny header'>Nº NF:</div>
                                    {props.data.dados.nNF}
                                </div>

                                <div className="two wide column">
                                    <div className='ui tiny header'>Série:</div>
                                    {props.data.dados.serie}
                                </div>

                                <div className="two wide column">
                                    <div className='ui tiny header'>Tipo NF:</div>
                                    {props.data.dados.tpNF}
                                </div>

                                <div className="four wide column">
                                    <div className='ui tiny header'>Status:</div>
                                    {props.data.protocolo.xMotivo}
                                </div>

                                <div className="column">
                                    <div className='ui tiny header'>Chave Acesso:</div>
                                    {props.data.protocolo.chNFe}
                                </div>
                            </div>
                            <div className="row">
                                
                                <div className="column">
                                    <div className='ui tiny header'>Emissão:</div>
                                    {props.data.dados.dhEmi}
                                </div>

                                <div className="column">
                                    <div className='ui tiny header'>Retorno Sefaz:</div>
                                    {props.data.protocolo.dhRecbto}
                                </div>

                                <div className="column">
                                    <div className='ui tiny header'>Saída:</div>
                                    {props.data.dados.dhSaiEnt}
                                </div>

                            </div>
                            <div className="row">

                                <div className="column">
                                    <div className='ui tiny header'>Natureza da operacao:</div>
                                    {props.data.dados.natOp}
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="column">
                    <div className="ui segment">
                        <div className="ui stackable equal width internally celled grid">
                        <div className="row">
                            <div className="column">
                                    <div className='ui tiny header'>Tipo Frete:</div>
                                    {(props.data.transportador.modFrete==1? props.data.transportador.modFrete+' - FOB':props.data.transportador.modFrete+' - CIF')}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Volumes:</div>
                                    {props.data.transportador.vol.qVol+" "+props.data.transportador.vol.esp}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Peso Bruto:</div>
                                    {props.data.transportador.vol.pesoB+" Kg"}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Peso Liquido:</div>
                                    {props.data.transportador.vol.pesoL+" Kg"}
                                </div>
                            </div>
                            <div className="row">
                                <div className="column">
                                    <div className='ui tiny header'>Valor Bruto:</div>
                                    {props.data.total.ICMSTot.vProd?"R$ "+props.data.total.ICMSTot.vProd:0}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Frete:</div>
                                    {"R$ "+props.data.total.ICMSTot.vFrete}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Seguro:</div>
                                    {"R$ "+props.data.total.ICMSTot.vSeg}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Desconto:</div>
                                    {"R$ "+props.data.total.ICMSTot.vDesc}
                                </div>
                                <div className="column">
                                    <div className='ui tiny header'>Valor Liquido:</div>
                                    {"R$ "+props.data.total.ICMSTot.vNF}
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
)
}




function ItemLine(props){
    let produtos = [];
    // const produto = props.data.item;
    const produto = props.data.item;
    
    console.log( props.data );

    // if( produto.cProd ){
    //     const prodt = [<td>{produto.prod.cProd?produto.prod.cProd:''}</td>,
    //         <td>{produto.prod.xProd}</td>,
    //         <td>{produto.prod.cEAN}</td>,
    //         <td>{produto.prod.NCM}</td>,
    //         <td>{produto.produto_cest}</td>,
    //         <td>{produto.produto_cfop}</td>,
    //         <td>{produto.prod.rastro?produto.prod.rastro.nLote:0}</td>,
    //         <td>{produto.prod.rastro?produto.prod.rastro.dhFab:0}</td>,
    //         <td>{produto.prod.rastro?produto.prod.rastro.dhVcto:0}</td>,
    //         <td>{produto.prod.uCom}</td>,
    //         <td>{produto.prod.vUnCom}</td>,
    //         <td>{produto.prod.qCom}</td>,
    //         <td>{produto.prod.vProd}</td>];
    // }
    
    /* <tr>
            <td>{produto.prod.cProd?produto.prod.cProd:''}</td>
            <td>{produto.prod.xProd}</td>
            <td>{produto.prod.cEAN}</td>
            <td>{produto.prod.NCM}</td>
            { <td>{produto.produto_cest}</td>
            <td>{produto.produto_cfop}</td> }
            <td>{produto.prod.rastro?produto.prod.rastro.nLote:0}</td>
            <td>{produto.prod.rastro?produto.prod.rastro.dhFab:0}</td>
            <td>{produto.prod.rastro?produto.prod.rastro.dhVcto:0}</td>
            <td>{produto.prod.uCom}</td>
            <td>{produto.prod.vUnCom}</td>
            <td>{produto.prod.qCom}</td>
            <td>{produto.prod.vProd}</td>
        </tr> */

    return(
        <tr>
            
            
        </tr>
    )
}

function ItemsNF(props){
    let linhas = [] ;
    const produtos = lerLoopInfinitoProduto( props.data ) ;

    for(var d in produtos){
        linhas.push(<ItemLine data={{item:produtos[d],n:d}} key={d}/>);
        // console.log(produtos[d]);
    }

    return(
        <div id='itemsNF' className='ui equal width grid'>
            <div className="column">
            <h4 className='ui blue dividing header'>LISTA DE ITENS</h4>
                <table className='ui small compact single line table'>
                    <thead>
                        <tr>
                            <th>Cod Fornecedor</th>
                            <th>Descricao</th>
                            <th>EAN</th>
                            <th>NCM</th>
                            {/* <th>CEST</th>
                            <th>CFOP</th> */}
                            <th>Lote</th>
                            <th>Fabricacao</th>
                            <th>Validade</th>
                            <th>UN</th>
                            <th>Preço Unit</th>
                            <th>Qtde</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {linhas}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

function InfoNF(){
    return(
        <div id='dadosNF'></div>
    )
}

function TaxesNF(props){
    
    return(
        <div id='impostosNF' className='ui equal width grid'>
            <div className="column">
                <div className="ui segment">
                    <h4 className='ui blue dividing header'>TRIBUTAÇÃO</h4>
                    <div className="ui stackable  equal width internally celled grid">
                        
                        <div className="ui row">
                        
                            <div className="column">
                                <div className='ui tiny header'>Total Nota</div>
                                {"R$ "+props.data.vNF}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>Base Calculo</div>
                                {"R$ "+props.data.vBC}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>Base Calculo ST</div>
                                {"R$ "+props.data.vBCST}
                            </div>

                            {/* <div className="column">
                                <div className='ui tiny header'>Total Tributos</div>
                                {"R$ "+props.data.totalTrib}
                            </div> */}
                        </div>

                        <div className="ui row">
                            <div className="column">
                                <div className='ui tiny header'>ICMS</div>
                                {"R$ "+props.data.vICMS}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>ICMS ST</div>
                                {"R$ "+props.data.vST}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>IPI</div>
                                {"R$ "+props.data.vIPI}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>IPI Devol</div>
                                {"R$ "+props.data.vIPIDevol}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>PIS</div>
                                {"R$ "+props.data.vPIS}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>COFINS</div>
                                {"R$ "+props.data.vCOFINS}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>Outros</div>
                                {"R$ "+props.data.vOutro}
                            </div>                        

                        </div>

                        <div className="ui row">
                        
                            <div className="column">
                                <div className='ui tiny header'>FCP</div>
                                {"R$ "+props.data.vFCP}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>FCP ST</div>
                                {"R$ "+props.data.vFCPST}
                            </div>

                            <div className="column">
                                <div className='ui tiny header'>FCP ST Ret</div>
                                {"R$ "+props.data.vFCPSTRet}
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}

function BillNF(props){
    let parcelas = [];

    
    
    // for(var e in props.data.boletos){
    //     parcelas.push(<tr key={e}>
    //         <td>
    //             {props.data.boletos[e].parcela}
    //         </td>
    //         <td>
    //             {props.data.boletos[e].vencimento}
    //         </td>
    //         <td>
    //             {props.data.boletos[e].valor}
    //         </td>
    //     </tr>);
    // }

    return(
        <div id='faturaNF' className='ui equal width grid'>
            <div className="ui row">
                <div className="column">
                    <div className="ui segment">
                        <h4 className='ui stackable blue dividing header'>PAGAMENTO</h4>

                        <div className="ui equal width grid">
                            <div className="row">
                                
                                <div className="column">
                                    <div className='ui tiny header'>Nª Fatura:</div>
                                    {props.data.fat.nFat}
                                </div>

                                <div className="column">
                                    <div className='ui tiny header'>Vlr Bruto:</div>
                                    {"R$ "+props.data.fat.vOrig}
                                </div>

                                <div className="column">
                                    <div className='ui tiny header'>Desconto:</div>
                                    {"R$ "+props.data.fat.vDesc}
                                </div>

                                <div className="column">
                                    <div className='ui tiny header'>Vlr Líquido:</div>
                                    {"R$ "+props.data.fat.vLiq}
                                </div>

                                <div className="column">
                                    <div className='ui tiny header'>Parcelas:</div>
                                    {/* {props.data.parcelas+"x"} */}
                                </div>

                            </div>

                            <div className="row">

                                <div className="column">
                                    <table className='ui table'>
                                        <thead>
                                            <tr><th>Parcela</th><th>Vencimento</th><th>Vlr Parcela</th></tr>
                                        </thead>
                                        <tbody>
                                        {parcelas}
                                        </tbody>
                                    </table>
                                </div>
                                
                            </div>
                            
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}

function AnnotationsNF(props){
    
    return(
        <div id='observacaoNF' className='ui equal width grid'>

        <div className="row">
            <div className="column">
                <div className="ui segment">
                    <h4 className='ui blue dividing header'>TRIBUTAÇÃO</h4>
                    <div className="ui equal width grid">
                        <div className="row">
                            <div className="column">
                                    <label className='ui inverted grey label' >Observações fiscais:</label><br/>
                                    <textarea readOnly rows={10} style={{width:'100%'}} defaultValue={props.data.fisco} ></textarea>
                            </div>
                        </div>
                        <div className="row">
                            <div className="wide column">
                                    <label className='ui inverted grey label'>Observações complementares:</label><br/>
                                    <textarea readOnly rows={10} style={{width:'100%'}} defaultValue={props.data.infCpl} ></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    )
}


function ReadXML(props){
    return(
        [
            <HeadNF   key='head'      data={ {emitente:props.data.NFe.infNFe.emit,destinatario:props.data.NFe.infNFe.dest,transportador:props.data.NFe.infNFe.transp.transporta} } />,
            <VolumeNF key='volumes'   data={ {dados: props.data.NFe.infNFe.ide,protocolo:props.data.protNFe.infProt,cobranca:props.data.NFe.infNFe.pag,pagamento:props.data.NFe.infNFe.pag,transportador:props.data.NFe.infNFe.transp,total:props.data.NFe.infNFe.total} } />,
            <ItemsNF  key='items'     data={ props.data.NFe.infNFe.det } />,
            <TaxesNF  key='impostos'  data={ props.data.NFe.infNFe.total.ICMSTot } />,
            props.data.fat?<BillNF   key='faturar'   data={ props.data.NFe.infNFe.cobr } />:'',
            // <InfoNF   key='info'      data={props.data.info} />,
            <AnnotationsNF key='annotation' data={props.data.NFe.infNFe.infAdic} />,
        ]
    );
}