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">Search background</div>

    <div class="uk-padding-small uk-text-center searchForm uk-height-medium  uk-flex uk-flex-center uk-flex-middle"  >
      <div>
        <h1 >Heading</h1>
        <input placeholder="Search for...">
        <quick-look-buttons
            [buttons]="buttonsOnLight"
        ></quick-look-buttons>
      </div>
    </div>-->
    <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);
    }
    .searchForm  {
      background: var(--svgURL) transparent no-repeat center bottom;
      

      background-size: auto;
      background-size: cover !important;
      height: inherit;
    }
  `]

})

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

  @HostBinding("attr.style")
  public get valueAsStyle(): any {
    let search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;
    let svg = 'data:image/svg+xml,' + (search.replace('{{color}}', this.formBackgroundColor));
    return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor};  --portal-dark-color: ${this.secondaryColor};  
    --background-dark-color: ${this.darkBackgroundColor};    --background-low-color: ${this.lightBackgroundColor}; --svgURL: url('${svg}');`);
  }
}