import { ChangeDetectionStrategy, Component, ElementRef, input, viewChild } from '@angular/core';
import html2canvas from 'html2canvas';
import { ButtonDirective } from '@/shared/ui/button.directive';
import { WithBackgroundImageDirective } from '@/shared/ui/with-background-image.directive';

type TicketUser = {
	fullname?: string;
	people?: number;
	qr_base64?: string;
	the_event?: {
		date?: string;
		place?: string | string[];
		time?: string;
	};
};

@Component({
	selector: 'app-user-ticket',
	imports: [ButtonDirective, WithBackgroundImageDirective],
	templateUrl: './user-ticket.component.html',
	styleUrl: './user-ticket.component.css',
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserTicketComponent {
	user = input.required<TicketUser>();
	ticket = viewChild.required<ElementRef<HTMLDivElement>>('ticket');
	async downloadQR() {
		const ticket = this.ticket().nativeElement;
		const canvas = await html2canvas(ticket);
		const link = document.createElement('a');
		link.href = canvas.toDataURL();
		link.download = 'ticket.png';
		link.click();
	}
}