import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
import { Panel } from 'primeng/panel';
import { ProgressBar } from 'primeng/progressbar';

@Component({
    standalone: true,
    selector: 'app-current-projects-widget',
    imports: [CommonModule, ButtonModule, MenuModule, Panel, ProgressBar],
    template: `
        <div class="card">
            <div class="flex justify-between items-center mb-6">
                <div class="font-semibold text-xl" >Aktuelle Projekte</div>
                <div>
                    <button pButton type="button" icon="pi pi-ellipsis-v"
                            class="p-button-rounded p-button-text p-button-plain"
                            (click)="menu.toggle($event)"></button>
                    <p-menu #menu [popup]="true" [model]="items"></p-menu>
                </div>
            </div>

            <p-panel [toggleable]="true">
                <ng-template #header>
                    <div class="flex items-center gap-2">
                        <span class="font-bold">EnB Bvh Rheinallee 191</span>
                    </div>
                </ng-template>
                <ng-template #footer>
                    <div class="flex flex-wrap items-center justify-between gap-4">
                        <div class="flex items-center gap-2">
                            <span class="text-surface-500 dark:text-surface-400"><i class="pi pi-user"></i> Erstellt: 01.09.1025</span>
                        </div>
                        <span class="text-surface-500 dark:text-surface-400"><i class="pi pi-calendar"></i> Bis: 22.12.2026</span>
                    </div>
                </ng-template>
                <ng-template #icons>
                    <p-button icon="pi pi-cog" severity="secondary" rounded text (click)="menu.toggle($event)" />
                    <p-menu #menu id="config_menu" [model]="items" [popup]="true" />
                    <p-button  label="Vorbereitung" variant="text" severity="info" [rounded]="true" size="small"/>
                </ng-template>
                <p class="m-0">
                    <span class="text-surface-500 dark:text-surface-400"><i class="pi pi-map-marker"></i> Nicht-Wohngebäude mit Mischnutzung</span>
                </p>
                <p>
                    <span >Fortschritt:</span>
                    <p-progress-bar [value]="25"></p-progress-bar>
                </p>
            </p-panel>
        </div>`
})
export class CurrentProjectsWidget {
    menu = null;

    items = [
        { label: 'Add New', icon: 'pi pi-fw pi-plus' },
        { label: 'Remove', icon: 'pi pi-fw pi-trash' }
    ];
}