import {Component} from '@angular/core';
import {NavigationComponent} from '@vendasta/fec-nav';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {Package} from '@vendasta/package/package';
import {Product} from '@vendasta/product/product';

@Component({
    template: `
        <div [innerHTML]="readMe"></div>
        <div style="width: 300px">
            <h2>Package Card:</h2>
            <div *ngFor="let pkg of packages">
                <va-package-card [pkg]="pkg" 
                                 (actionButtonClicked)="buttonClickHandler(pkg)" 
                                 (settingsMenuItemClicked)="packageSettingsMenuItemClickedHandler(pkg)"
                                 (helpMenuItemClicked)="packageHelpMenuItemClickedHandler(pkg)">                    
                </va-package-card>
            </div>
        </div>
        <p></p>
        <div style="width: 300px">
            <h2>Product Card:</h2>
            <div *ngFor="let prod of products">
                <va-product-card [product]="prod" 
                                 (actionButtonClicked)="buttonClickHandler(prod)"
                                 (settingsMenuItemClicked)="productSettingsMenuItemClickedHandler(prod)"
                                 (helpMenuItemClicked)="productHelpMenuItemClickedHandler(prod)">                    
                </va-product-card>
            </div>
        </div>
    `
})
export class VaPackageCardDocComponent {
    readMe: SafeHtml;
    packages: Package[];
    products: Product[];

    constructor(private nav: NavigationComponent, public sanitizer: DomSanitizer) {
        nav.activeMenuId = 'va-pkg-card-doc';

        this.readMe = this.sanitizer.bypassSecurityTrustHtml(require('./README.html'));
        this.packages = [{
            solutionId: '1',
            partnerId: 'TEST',
            marketId: '',

            name: 'Awesome Pepsi Package',
            icon: 'http://www.mpmlaw.com/wp-content/uploads/2017/03/pepsi-logo.png',
            status: 'draft',
            tagline: 'This is an awesome pkg of Pepsi',
            content: 'This pkg of Pepsi is loaded with over 9000 of awesomeness and then even more awesomeness because it is awesome',
            headerImageUrl: 'http://www.nsmshop.com/assets/images/2017PSPBanner.png',

            pricing: { currency: 'CAD', prices: []},
            sellingPrice: 0,
            currency: '',
            billingFrequency: '',
            billingFrequencyOther: '',

            products: [],

            hideProductIconsAndNames: false,
            hideProductDetails: false,

            createdDate: new Date(),
            updatedDate: new Date()}];

        this.products = [{
            name: 'Awesome Pepsi Product',
            tagline: 'This is an awesome product of Pepsi',
            origin: '',
            product_id: '',
            partner_id: '',
            description: 'This product of Pepsi is loaded with over 9000 of awesomeness and then even more awesomeness because it is awesome',
            category: '',
            faqs: [],
            lmiCategories: [],
            serviceModel: [],
            headerImageUrl: 'http://www.nsmshop.com/assets/images/2017PSPBanner.png',
            iconUrl: 'http://www.mpmlaw.com/wp-content/uploads/2017/03/pepsi-logo.png',
            iconColor: '',
            screenshotUrls: [],
            pdfUploadUrls: [],
            recommendedSellPrice: 0,
            wholesalePrice: 0,
            enabled: false,
            billingFrequency: '',
            billingFrequencyOther: '',
            currency: '',
            hideProductIconsAndNames: false,
            hideProductDetails: false,
            usesCustomizationForm: false,
            keySellingPoints: [],
            entryUrl: '',
            websiteUrl: '',

            createdDate: new Date(),
            updatedDate: new Date()
        }];
    }

    buttonClickHandler(pkg: Package) {
        alert(JSON.stringify(pkg));
    }

    packageHelpMenuItemClickedHandler(pkg: Package) {
        alert('You clicked the Help menu item for Package ' + pkg.name);
    }

    packageSettingsMenuItemClickedHandler(pkg: Package) {
        alert('You clicked the Settings menu item for Package ' + pkg.name);
    }

    productHelpMenuItemClickedHandler(product: Product) {
        alert('You clicked the Help menu item for Product ' + product.name);
    }

    productSettingsMenuItemClickedHandler(product: Product) {
        alert('You clicked the Settings menu item for Product ' + product.name);
    }
}