import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER_DIRECTIVES, ActivatedRoute, Router } from '@angular/router';
import { AccountsService } from './accounts.service';
import { Account } from './account.model';

@Component({
    directives: [ROUTER_DIRECTIVES],
    template: `
        <ul class="nav nav-tabs" #tabs>
            <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['/accounts', currentAccount, 'account-statement']">Account statement</a>
            </li>
            <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['/accounts', currentAccount, 'invoices']">Invoices</a>
            </li>
            <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['/accounts', currentAccount, 'payments']">Payments</a>
            </li>
            <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['/accounts', currentAccount, 'account-details']">Account details</a>
            </li>
            <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['/accounts', currentAccount, 'taxes']">Taxes</a>
            </li>
            <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['/accounts', currentAccount, 'budget']">Budget</a>
            </li>
            <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['/accounts', currentAccount, 'payment-method']">Payment method</a>
            </li>
        </ul>
`
})

export class AccountComponent implements OnInit {
    public constructor(private accountsService: AccountsService,
        private route: ActivatedRoute,
        private router: Router) { }

    private sub: any;
    private availableAccounts: IChosenOption[] = [];
    private currentAccount: number;

    private showAccount(account: number) {
        this.router.navigate(['/accounts', account, 'account-statement', '')]);
    }

    public ngOnInit() {
        this.accountsService.getAccounts()
            .subscribe((accounts: Account[]) => {
                this.availableAccounts = accounts.map((a: Account) => ({
                    Value: a.ID,
                    Label: a.Name
                }));
            });
        this.sub = this.route.params.map(params => params['id'])
            .subscribe((id: number) => {
                console.log(id);
                this.currentAccount = id;
            });
    }

    public ngOnDestroy() {
        this.sub.unsubscribe();
    }
}