import {Component, HostBinding, Input} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';


@Component({
  selector: 'quick-look-backgrounds',
  template: `
    <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>

    <div class="uk-padding-small uk-text-center darkBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle"  >
      <div>
        <h1 >Heading</h1>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
        <a class="">Link</a>
        <quick-look-buttons
           [buttons]="buttonsOnDark"  
        ></quick-look-buttons>
      </div>
    </div>
    
    <div class="uk-margin-top">

      <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Light background</div>
      <div class="uk-padding-small uk-text-center  uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle" >
        <div>
          <h1 >Heading</h1>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
          <a class="portal-link">Link</a>
          <br>
          <quick-look-buttons
            [buttons]="buttonsOnLight" ></quick-look-buttons>
        </div>
      </div>
    </div>
  `,
  styles:[`
    .darkBackground{
        background-color: var(--background-dark-color);
    }
    .lightBackground{
        background-color: var(--background-low-color);
    } 
  `]

})

export class QuickLookBackgroundsComponent {
  @Input() primaryColor;
  @Input() secondaryColor;
  @Input() darkBackgroundColor;
  @Input() lightBackgroundColor;
  @Input() buttonsOnDark:ButtonsCustomization;
  @Input() buttonsOnLight:ButtonsCustomization;
  constructor(   private sanitizer: DomSanitizer) {
  }

  @HostBinding("attr.style")
  public get valueAsStyle(): any {
    return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor};  --portal-dark-color: ${this.secondaryColor};  
    --background-dark-color: ${this.darkBackgroundColor};    --background-low-color: ${this.lightBackgroundColor};`);
  }
}