import { Component, ElementRef, ViewChild } from '@angular/core';
import { PdfService, PdfOptions } from '@codewithrajat/rm-ng-structure-pdf';

@Component({
  selector: 'app-report',
  template: `
    <div #pdfContent class="report-content">
      <h1>My Report</h1>
      <p>This content will be converted to PDF</p>
      <table>
        <thead>
          <tr>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Product A</td>
            <td>5</td>
            <td>$50.00</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button (click)="exportToPdf()" class="export-btn">
      Export to PDF
    </button>
  `
})
export class ReportComponent {
  @ViewChild('pdfContent') contentRef!: ElementRef<HTMLDivElement>;

  constructor(private pdfService: PdfService) {}

  exportToPdf(): void {
    const options: PdfOptions = {
      fileName: 'report.pdf',
      pageSize: 'a4',
      orientation: 'portrait',
      title: 'My Report',
      author: 'My Application'
    };

    this.pdfService.generatePaginatedPdf(
      this.contentRef.nativeElement, 
      options
    );
  }
}

import { Component } from '@angular/core';
import { PdfService } from '@codewithrajat/rm-ng-structure-pdf';

@Component({
  selector: 'app-root',
  standalone: true,
  providers: [PdfService],
  template: `...`
})
export class AppComponent {}

import { NgModule } from '@angular/core';
import { PdfService } from '@codewithrajat/rm-ng-structure-pdf';

@NgModule({
  declarations: [AppComponent],
  providers: [PdfService],
  bootstrap: [AppComponent]
})
export class AppModule {}

interface PdfOptions {
  fileName: string;           // Output file name (with .pdf extension)
  pageSize: PageSize;         // Document page size
  orientation: Orientation;   // Page orientation
  title: string;             // PDF metadata title
  author: string;            // PDF metadata author
}

type PageSize = 'a4' | 'letter' | 'legal';
type Orientation = 'portrait' | 'landscape';

import { Component, ElementRef, ViewChild } from '@angular/core';
import { PdfService, PdfOptions } from '@codewithrajat/rm-ng-structure-pdf';

@Component({
  selector: 'app-invoice',
  template: `
    <div #invoice class="invoice">
      <header class="invoice-header">
        <h1>Invoice #{{invoiceNumber}}</h1>
        <div class="company-info">
          <h2>{{companyName}}</h2>
          <p>{{companyAddress}}</p>
        </div>
      </header>
      
      <section class="client-info">
        <h3>Bill To:</h3>
        <p>{{clientName}}</p>
        <p>{{clientAddress}}</p>
      </section>
      
      <table class="invoice-items">
        <thead>
          <tr>
            <th>Description</th>
            <th>Quantity</th>
            <th>Rate</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of items">
            <td>{{item.description}}</td>
            <td>{{item.quantity}}</td>
            <td>{{item.rate | currency}}</td>
            <td>{{item.amount | currency}}</td>
          </tr>
        </tbody>
      </table>
      
      <footer class="invoice-footer">
        <div class="subtotal">Subtotal: {{subtotal | currency}}</div>
        <div class="tax">Tax: {{tax | currency}}</div>
        <div class="total">Total: {{total | currency}}</div>
      </footer>
    </div>
    
    <button (click)="exportInvoice()">Download Invoice</button>
  `
})
export class InvoiceComponent {
  @ViewChild('invoice') invoiceRef!: ElementRef<HTMLDivElement>;
  
  invoiceNumber = 'INV-2024-001';
  companyName = 'Your Company';
  // ... other properties
  
  constructor(private pdfService: PdfService) {}
  
  exportInvoice(): void {
    const options: PdfOptions = {
      fileName: `invoice-${this.invoiceNumber}.pdf`,
      pageSize: 'letter',
      orientation: 'portrait',
      title: `Invoice ${this.invoiceNumber}`,
      author: this.companyName
    };
    
    this.pdfService.generatePaginatedPdf(
      this.invoiceRef.nativeElement,
      options
    );
  }
}

import { Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { PdfService, PdfOptions } from '@codewithrajat/rm-ng-structure-pdf';

@Component({
  selector: 'app-dashboard',
  template: `
    <div #report class="report">
      <h1>Monthly Dashboard Report</h1>
      
      <section class="charts">
        <div class="chart-container">
          <h2>Sales Overview</h2>
          <canvas #salesChart></canvas>
        </div>
        <div class="chart-container">
          <h2>Revenue Trends</h2>
          <canvas #revenueChart></canvas>
        </div>
      </section>
      
      <section class="data-tables">
        <h2>Detailed Metrics</h2>
        <table>
          <!-- Table content -->
        </table>
      </section>
    </div>
    
    <button (click)="exportReport()">Export Report</button>
  `
})
export class DashboardComponent {
  @ViewChild('report') reportRef!: ElementRef<HTMLDivElement>;
  
  constructor(
    private pdfService: PdfService,
    private cdr: ChangeDetectorRef
  ) {}
  
  async exportReport(): Promise<void> {
    // Ensure all charts are fully rendered
    await this.waitForChartsToRender();
    
    // Trigger change detection
    this.cdr.detectChanges();
    
    // Small delay to ensure rendering is complete
    await new Promise(resolve => setTimeout(resolve, 100));
    
    const options: PdfOptions = {
      fileName: `dashboard-report-${this.getFormattedDate()}.pdf`,
      pageSize: 'a4',
      orientation: 'landscape',
      title: 'Monthly Dashboard Report',
      author: 'Analytics Team'
    };
    
    this.pdfService.generatePaginatedPdf(
      this.reportRef.nativeElement,
      options
    );
  }
  
  private async waitForChartsToRender(): Promise<void> {
    // Implementation depends on your charting library
    // Example: wait for chart animation to complete
    return new Promise(resolve => setTimeout(resolve, 500));
  }
  
  private getFormattedDate(): string {
    return new Date().toISOString().split('T')[0];
  }
}

import { Component, ElementRef, ViewChild } from '@angular/core';
import { PdfService, PdfOptions } from '@codewithrajat/rm-ng-structure-pdf';

@Component({
  selector: 'app-document',
  template: `
    <div #document class="document">
      <section class="cover-page">
        <h1>Annual Report 2024</h1>
        <p class="subtitle">Company Overview and Financial Performance</p>
      </section>
      
      <section class="executive-summary">
        <h2>Executive Summary</h2>
        <p><!-- Content --></p>
      </section>
      
      <section class="financial-data">
        <h2>Financial Performance</h2>
        <div class="charts"><!-- Charts --></div>
        <table><!-- Financial tables --></table>
      </section>
      
      <section class="appendix">
        <h2>Appendix</h2>
        <p><!-- Additional information --></p>
      </section>
    </div>
    
    <button (click)="exportDocument()">Export Document</button>
  `
})
export class DocumentComponent {
  @ViewChild('document') documentRef!: ElementRef<HTMLDivElement>;
  
  constructor(private pdfService: PdfService) {}
  
  exportDocument(): void {
    const options: PdfOptions = {
      fileName: 'annual-report-2024.pdf',
      pageSize: 'a4',
      orientation: 'portrait',
      title: 'Annual Report 2024',
      author: 'Company Name'
    };
    
    this.pdfService.generatePaginatedPdf(
      this.documentRef.nativeElement,
      options
    );
  }
}

async exportToPdf(): Promise<void> {
  // Wait for images to load
  await this.waitForImages();
  
  // Wait for dynamic content
  this.cdr.detectChanges();
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Generate PDF
  this.pdfService.generatePaginatedPdf(
    this.contentRef.nativeElement,
    this.options
  );
}

private waitForImages(): Promise<void> {
  const images = this.contentRef.nativeElement.querySelectorAll('img');
  const promises = Array.from(images).map(img => {
    if (img.complete) return Promise.resolve();
    return new Promise(resolve => {
      img.onload = resolve;
      img.onerror = resolve;
    });
  });
  return Promise.all(promises).then(() => {});
}

async exportWithCharts(): Promise<void> {
  // Ensure charts are rendered
  await this.renderCharts();
  
  // Wait for chart animations to complete
  await new Promise(resolve => setTimeout(resolve, 500));
  
  // Generate PDF
  this.pdfService.generatePaginatedPdf(
    this.contentRef.nativeElement,
    this.options
  );
}

async exportToPdf(): Promise<void> {
  try {
    await this.pdfService.generatePaginatedPdf(
      this.contentRef.nativeElement,
      this.options
    );
    this.showSuccessMessage('PDF exported successfully');
  } catch (error) {
    console.error('PDF generation failed:', error);
    this.showErrorMessage('Failed to generate PDF. Please try again.');
  }
}

isGeneratingPdf = false;

async exportToPdf(): Promise<void> {
  this.isGeneratingPdf = true;
  
  try {
    await this.pdfService.generatePaginatedPdf(
      this.contentRef.nativeElement,
      this.options
    );
  } finally {
    this.isGeneratingPdf = false;
  }
}

exportToPdf(): void {
  const timestamp = new Date().toISOString().split('T')[0];
  const username = this.authService.getCurrentUser().name;
  
  const options: PdfOptions = {
    fileName: `report-${username}-${timestamp}.pdf`,
    pageSize: 'a4',
    orientation: 'portrait',
    title: `Report for ${username}`,
    author: username
  };
  
  this.pdfService.generatePaginatedPdf(
    this.contentRef.nativeElement,
    options
  );
}

isPdfMode = false;

preparePdfExport(): void {
  this.isPdfMode = true;
  this.cdr.detectChanges();
}

async exportToPdf(): Promise<void> {
  this.preparePdfExport();
  
  await new Promise(resolve => setTimeout(resolve, 100));
  
  await this.pdfService.generatePaginatedPdf(
    this.contentRef.nativeElement,
    this.options
  );
  
  this.isPdfMode = false;
}

async exportLargeDocument(): Promise<void> {
  // Clear any cached data
  this.clearCache();
  
  // Generate PDF
  await this.pdfService.generatePaginatedPdf(
    this.contentRef.nativeElement,
    this.options
  );
  
  // Clean up after generation
  this.cleanup();
}

// Old
import { PdfService } from '@codewithrajat/rm-ng-structure-pdf';

// New
import { PdfService } from '@codewithrajat/rm-ng-structure-pdf';

// Check the method signature matches
this.pdfService.generatePaginatedPdf(element, options);