const {
    style
} = require('./style-factura')

const {generarQR} = require('../../controller/qr_generator/QRGenerator')

const validaciones = [
    // 'TIPO_ARCHIVO',
    //   'NOMBRE_EMPRESA',
    //   'NOMBRE_SUCURSAL',
    //   'TITULO_ARCHIVO',
];
const pages_border = {
    border_left: 10,
    border_top: 0,
    border_right: 10,
    border_bottom: 0,
    header_height: 65,
    footer_height: 65,
};


const pagare = async(parametros, imagen, fuente) => {
    let url = await qr_generate(parametros)
    return  `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <style>
            ` + await style(fuente) + `
        </style>
      </head>
      <body>

        <div id="pageHeader">
            ` + HEADER(imagen,parametros)+`
        </div>

        <div id="pageFooter">
            <div class='page_number'>
                {{page}}/{{pages}}
            </div>
        </div>

        <div id="pageFooter-last">
            `+ footer(url,parametros)+`
            <div class='page_number'>
                {{page}}/{{pages}}
            </div>
        </div>

        <div>
            ` + emisor_receptor(parametros)+`
            ` + datos_generales(parametros)+`
            ` + conceptos(parametros)+`
        </div>


      </body>
    </html>
    `
}


const HEADER = (url_logo,parametros) => { 
    return `
    <table cellspacing="0"  style="width: 100%; vertical-align: top" cellspacing="0" >
        <tr style=" height: 38mm; ">
            <td style="width: 47.5%; max-width: 47.5%" align="center">
                    <img src="${url_logo}" alt="Logo" class="img-logo" />
            </td>
            <td style="width: 5%; max-width: 5%">
            </td>
            <td style="width: 47.5%; max-width: 47.5%;">
                <table class="info-factura" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 100%;">
                    <tr>
                        <th colspan="2" align="center" class="th-titulo" style="width: 100%; max-width: 100%;">Factura Electronica </th>
                    </tr>

                    <tr>
                        <td class="label">Tipo Comprobante</td>
                        <td class="valor">${parametros.comprobante.TipoDeComprobante}</td>
                    </tr>

                    <tr>
                        <td class="label">Serie - Folio</td>
                        <td class="valor">${parametros.comprobante.Serie +' - '+ parametros.comprobante.Folio}</td>
                    </tr>
                    <tr>
                        <td class="label">Fecha</td>
                        <td class="valor">${parametros.comprobante.Fecha}</td>
                    </tr>

                    <tr>
                        <td class="label">No. Serie Certificado SAT</td>
                        <td class="valor">${parametros.certificado_sat}</td>
                    </tr>

                    <tr>
                        <td class="label">No. Serie del CSD</td>
                        <td class="valor">${parametros.comprobante.NoCertificado}</td>
                    </tr>

                    <tr>
                        <td class="label">Folio Fiscal</td>
                        <td class="valor">${parametros.uuid}</td>
                    </tr>

                    <tr>
                        <td class="label">Fecha y Hora de Certificación</td>
                        <td class="valor">${parametros.fecha_timbrado}</td>
                    </tr>

                    <tr>
                        <td class="label">Lugar de Expedición (CP)</td>
                        <td class="valor">${parametros.comprobante.LugarExpedicion}</td>
                    </tr>

                </table> 
            </td>
        </tr>
    </table>

`
}

const emisor_receptor = (parametros) => {
    return ` <table cellspacing="0" class="info-detlle" style="width: 100%; margin-bottom:20px;  vertical-align: top;" cellspacing="0">

    <tr>
        <td style="width: 50%; max-width: 50%;">

            <table class="info-detalle" cellspacing="0" style="width: 100%;">
                <tr>
                    <th colspan="2" align="center" class="th-titulo" style="width: 100%;">Emisor</th>
                </tr>

                <tr>
                    <th colspan="2" class="valor" style="width: 100%;">${parametros.emisor.Nombre}</th>
                </tr>

                <tr>
                    <td class="label">RFC</td>
                    <td class="valor">${parametros.emisor.Rfc}</td>
                </tr>
                <tr>
                    <td class="label">Regimen Fiscal</td>
                    <td class="valor">${parametros.emisor.RegimenFiscal}</td>
                </tr>

            </table>

        </td>

        <td style="width: 5%;">
        </td>

        <td style="width: 50%;">
            <table class="info-detalle"  cellspacing="0" style="width: 100%;">
                <tr>
                    <th colspan="2" align="center" class="th-titulo">Receptor</th>
                </tr>

                <tr>
                    <th colspan="2" class="valor" style="width: 100%;">${parametros.receptor.Nombre}</th>
                </tr>

                <tr align="left">
                    <td class="label">RFC</td>
                    <td class="valor">${parametros.receptor.Rfc}</td>
                </tr>
                <tr align="left">
                    <td class="label">Uso CFDI</td>
                    <td class="valor">${parametros.receptor.UsoCFDI}</td>
                </tr>
                <tr align="left">
                    <td class="label" > Regimen Fiscal </td>
                    <td class="valor"> ${parametros.receptor.RegimenFiscalReceptor}</td>
                </tr>

            </table>
        </td>
    </tr>

</table>`
}

const datos_generales= (parametros) => {
    parametros.comprobante.CondicionesDePago = parametros.comprobante.MetodoPago.substring(5, parametros.comprobante.MetodoPago.length);
    return `
    <table class="info-detalle page_header" style="width: 100%; border-spacing: 10px; page-break-inside:auto" cellspacing="0">
        <tr>
            <th colspan="4" align="center" style="width: 100%;" class="th-titulo">
                Datos Generales Del Comprobante
            </th>
        </tr>
        <tr>
            <td class="label" style="width: 15%;">Moneda</td>
            <td class="valor" style="width: 15%;">${parametros.comprobante.Moneda || 'N/A'}</td>
            <td class="label" style="width: 15%;">Forma de Pago</td>
            <td class="valor" style="width: 55%;">${parametros.comprobante.FormaPago|| 'N/A'}</td>
        </tr>
        <tr>
            <td class="label" style="width: 15%;">Tipo de Cambio</td>
            <td class="valor" style="width: 15%;">${parametros.comprobante.TipoCambio || 'N/A'}</td>
            <td class="label" style="width: 15%;">Metodo de Pago</td>
            <td class="valor" style="width: 55%;">${parametros.comprobante.MetodoPago || 'N/A'}</td>
        </tr>
        <tr>
            <td class="label" style="width: 15%;">Clave Confirmación</td>
            <td class="valor" style="width: 15%;">${parametros.comprobante.ClaveConfirmacion || 'N/A'}</td>
            <td class="label" style="width: 15%;">Condiciones de Pago</td>
            <td class="valor" style="width: 55%;">${parametros.comprobante.CondicionesDePago|| 'N/A'}</td>
        </tr>
    </table>
            `
}

const conceptos = (parametros) =>{
    
    let html = ` 
                <div style="margin-top: 20px">
                <table class="info-concepto" cellspacing="0">
                    <thead style="display:table-header-group;">
                        <tr style="background-color: #DDD">
                            <td class="label cantidad" align="center">Cant.</td>
                            <td class="label descripcion" align="center">Descripción</td>
                            <td class="label unidad" align="center">Unidad</td>
                            <td class="label claveunidad" align="center">Clave Unidad</td>
                            <td class="label clavprodserv" align="center">ClavProd Serv</td>
                            <td class="label preciounitario" align="center">Precio Unitario</td>
                            <td class="label importe" align="center">Importe</td>
                        </tr>
                    </thead>
        `; 

    parametros.conceptos.forEach(concepto => {
        
        html+= 
        `
                        <tr style="width: 100%;max-width: 100%;">
                            <td class="valor cantidad" align="center">${concepto.Cantidad}</td>
                            <td class="valor descripcion" align="left">${concepto.Descripcion}</td>
                            <td class="valor unidad" align="center">${concepto.Unidad}</td>
                            <td class="valor claveunidad" align="center">${concepto.ClaveUnidad}</td>
                            <td class="valor clavprodserv" align="center">${concepto.ClaveProdServ}</td>
                            <td class="valor preciounitario" align="right">${concepto.Importe}</td>
                            <td class="valor importe" align="right">${concepto.ValorUnitario}</td>
                        </tr>
    
                    
               `
    });

    html += `<tr>
                <td class="label" align="center" style="height: 15px; border: none; border-bottom: none" colspan="5"></td>
                <td class="label" align="right" style="border: #DDD 2px solid !important;">Subtotal</td>
                <td class="valor" align="right">${parametros.comprobante.SubTotal}</td>
            </tr>

            <tr>
                <td class="label" align="center" style="height: 15px; border: none; border-bottom: none" colspan="5"></td>
                <td class="label" align="right" style="border: #DDD 2px solid !important;">Descuento</td>
                <td class="valor" align="right" style="">${parametros.comprobante.Descuento}</td>
            </tr>
            <tr>
                <td class="label" align="center" style="height: 15px; border: none; border-bottom: none" colspan="5"></td>
                <td class="label" align="right" style="border: #DDD 2px solid !important;">Impuesto Trasladado</td>
                <td class="valor" align="right" style="">${parametros.impuesto_trasladado}</td>
            </tr>


            <tr>
                <td class="label" align="center" style="height: 15px; border: none; border-bottom: none" colspan="5"></td>
                <td class="label" align="right" style="border: #DDD 2px solid !important;">Total</td>
                <td class="valor" align="right">${parametros.comprobante.Total}</td>
            </tr>

            </table>
            </div>
            `

    return html;
}

const footer = (url_imagen,parametros) =>{
    return `
    <div class="box">
        
        <div>
            <table class="info-detalles" cellspacing="0" >
                <tr>
                    <td class="label" align="center" style="width:75%; background-color: #DDD; font-size: 9px;">Sello SAT</td>
                    <td class="label" rowspan="10" style="padding-left: 2%; padding-right:2%;" > <img src="${url_imagen}"/> </td>
                </tr>
                <tr>
                    <td class="label" align="left" style="width: 80%; font-size: 6px; word-break: break-all;" >${parametros.sello_sat}</td>
                </tr>
                <tr>
                    <td class="label" align="center" style="width: 80%; background-color: #DDD; font-size: 9px;" >Sello Digital</td>
                </tr>
        
                <tr>
                    <td class="label" align="left" style="width: 80%; font-size: 6px; word-break: break-all;" >${parametros.sello_cfd}</td>
                </tr>
        
                <tr>
                    <td class="label" align="center" style="width: 80%; background-color: #DDD; font-size: 9px;" >Cadena Original</td>
                </tr>
                <tr>
                    <td class="label" align="left" style="width: 80%; font-size: 6px; word-break: break-all;" >${parametros.cadena_original}</td>
                </tr>
                <tr rowspan="4">
                    <td class="label" align="center" style="width: 80%;" id="SeparadorTD"></td>
                </tr>
            </table>
        </div>
        
    </div>`
}


const qr_generate = async (parametros) =>{
    let sello_digital = parametros.sello_cfd.substring(parametros.sello_cfd.length - 8);
    let total  = parametros.comprobante.Total.replace('$','');
    let url_sat = `https://verificacfdi.facturaelectronica.sat.gob.mx/default.aspx?id=${parametros.uuid}&re=${parametros.emisor.Rfc}&rr=${parametros.receptor.Rfc}&tt=${total}&fe=${sello_digital}`
    console.log(url_sat);
    let url = await generarQR(url_sat);
    // console.log('URL GENERADO',url);
    return url;
}



module.exports = {
    pagare,
    validaciones,
    pages_border
}