import { Component, Input, Directive, ContentChild, forwardRef, QueryList } from '@angular/core';

@Component({
    selector: 'app-section-code',
    template: `
        <h5 class="section-title {{styleClass}}">
            <div class="flex-container">
                <span [class.app-section-code--deprecated]="isDeprecated">
                    {{label}}
                </span>
                <button class="btn btn-sm btn-accent ml-2" style="margin-top: -7px;" (click)="toggleCode()">
                    <span class="ux-icon ux-icon-code"></span>
                </button>
                <div *ngIf="versionLabel" class="ml-auto">
                    <span class="ux-u-color-danger">{{versionLabel}}</span>
                </div>
            </div>
            <div *ngIf="isDeprecated">
                <small class="ux-u-color-danger">Deprecated in 3.x</small>
            </div>
        </h5>

        <div class="ux-u-mv" *ngIf="sectionDescription">
            <ng-content select="sectionDescription"></ng-content>
        </div>

        <ng-template [ngIf]="isCodeExpanded">
            <ux-tabs>
                <ux-tab label="HTML" [isVisible]="sectionCodeHTML">
                    <pre><code class="language-markup" pCode><ng-content select="sectionCodeHTML"></ng-content></code></pre>
                </ux-tab>

                <ux-tab label="TS" [isVisible]="sectionCodeTS">
                    <pre><code class="language-javascript" pCode><ng-content select="sectionCodeTS"></ng-content></code></pre>
                </ux-tab>

                <ux-tab label="Service" [isVisible]="sectionCodeSERVICE">
                    <pre><code class="language-javascript" pCode><ng-content select="sectionCodeSERVICE"></ng-content></code></pre>
                </ux-tab>

                <ux-tab label="CSS" [isVisible]="sectionCodeCSS">
                    <pre><code class="language-javascript" pCode><ng-content select="sectionCodeCSS"></ng-content></code></pre>
                </ux-tab>

                <ux-tab label="DOC" [isVisible]="sectionCodeDOC">
                    <div class="language-doc"><ng-content select="sectionCodeDOC"></ng-content></div>
                </ux-tab>
            </ux-tabs>

            <ng-template [ngIf]="!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS">
                <pre class="only-html"><code class="language-markup" pCode><ng-content></ng-content></code></pre>
            </ng-template>
        </ng-template>
  `,
    styles: [`
            .app-section-code--deprecated {
                color: red;
                text-decoration: line-through ;
            }
            .language-doc {
                background-color: #f5f8fb;
                border-left: 10px solid #358ccb;
                box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
                display: block;
                height: inherit;
                max-height: inherit;
                overflow: auto;
                padding: 1rem;
                position: relative;
            }
            .first-section {
                margin-top: 0;
                padding-top: 10px;
            }
    `]
})
export class AppSectionCodeComponent {
    @Input() label: string;
    @Input() content: string;
    @Input() styleClass: string;
    @Input() versionLabel: string;
    @Input() isDeprecated: boolean = false;

    isCodeExpanded: boolean = false;

    @ContentChild(forwardRef(() => AppSectionDescriptionTagDirective)) sectionDescription: QueryList<AppSectionDescriptionTagDirective>;
    @ContentChild(forwardRef(() => AppSectionCodeHtmlTagDirective)) sectionCodeHTML: QueryList<AppSectionCodeHtmlTagDirective>;
    @ContentChild(forwardRef(() => AppSectionCodeTsTagDirective)) sectionCodeTS: QueryList<AppSectionCodeTsTagDirective>;
    @ContentChild(forwardRef(() => AppSectionCodeServiceTagDirective)) sectionCodeSERVICE: QueryList<AppSectionCodeServiceTagDirective>;
    @ContentChild(forwardRef(() => AppSectionCodeCssTagDirective)) sectionCodeCSS: QueryList<AppSectionCodeCssTagDirective>;
    @ContentChild(forwardRef(() => AppSectionCodeDocTagDirective)) sectionCodeDOC: QueryList<AppSectionCodeDocTagDirective>;

    constructor() { }

    toggleCode() {
        this.isCodeExpanded = !this.isCodeExpanded;
    }
}

/* tslint:disable */
@Directive({ selector: 'sectionDescription' })
export class AppSectionDescriptionTagDirective { }

@Directive({ selector: 'sectionCodeHTML' })
export class AppSectionCodeHtmlTagDirective { }

@Directive({ selector: 'sectionCodeTS' })
export class AppSectionCodeTsTagDirective { }

@Directive({ selector: 'sectionCodeSERVICE' })
export class AppSectionCodeServiceTagDirective { }

@Directive({ selector: 'sectionCodeCSS' })
export class AppSectionCodeCssTagDirective { }

@Directive({ selector: 'sectionCodeDOC' })
export class AppSectionCodeDocTagDirective { }
/* tslint:enable */
