import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatTable, MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
import EventService from '../shared/services/EventService';
import { Policy } from '../shared/models/policy';
import { Subscription } from 'rxjs';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'policy-table',
    standalone: true,
    imports: [FormsModule, MatTableModule, MatIconModule],
    templateUrl: './policy-table.component.html',
    styleUrl: './policy-table.component.scss'
})
export class PolicyTableComponent implements OnInit, OnDestroy {
    @Input() policies: Policy[] = []
    displayedColumns = ['path', 'usage', 'span', 'actions']

    @ViewChild(MatTable) table: MatTable<Policy>;

    private subscription: Subscription | undefined;

    constructor(private events: EventService) {
        this.table = {} as MatTable<Policy>;
    }

    ngOnInit(): void {
        this.subscription = this.events.listen('addPolicy', (payload) => {
            console.log('adding policy', payload);
            this.policies.push(new Policy(payload, 1, 5000, true, true));
            console.log(this.policies);
            this.table.renderRows();
        });
    }

    ngOnDestroy(): void {
        if (this.subscription)
            this.subscription.unsubscribe();
    }

    cancel(policy: Policy) {
        policy.editing = false;
        this.table.renderRows();
    }

    delete(policy: Policy) {
        const index = this.policies.indexOf(policy);
        if (index >= 0) {
            this.policies.splice(index, 1);
            this.table.renderRows();
        }
    }

    edit(policy: Policy) {
        console.log('prior', policy.editing)
        policy.editing = true;

    }

    save(policy: Policy) {
        policy.editing = false;
        policy.isNew = false;
        this.table.renderRows();
    }
}