import {Component, Inject, Input, RendererFactory2, ViewEncapsulation} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {LayoutService} from "../../openaireLibrary/services/layout.service";
import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions";
import {DOCUMENT} from "@angular/common";

@Component({
  selector: 'customization',
  template: ``
})

export class CustomizationComponent {
  @Input() communityId;
  @Input() layout: CustomizationOptions;
  @Input() properties:EnvProperties;
  customizationCss:string = "";


  constructor(private route: ActivatedRoute,private router: Router, private _layoutService: LayoutService, @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2) {
  }

  public ngOnInit() {

    this.buildCss();
    try {
      const head = this.document.getElementsByTagName('head')[0];

      let customizationCssFile = this.document.getElementById('customCssfile' ) as HTMLLinkElement;
      if (customizationCssFile) {
        customizationCssFile.href = "/assets/customization.css";
      } else {
        const style = this.document.createElement('link');
        style.id = 'customCssfile';
        style.rel = 'stylesheet';
        style.href = "/assets/customization.css";
        head.appendChild(style);
      }
      let customCss  = this.document.getElementById('customStyle' ) as HTMLLinkElement;
      if (customCss) {
        customCss.append(this.customizationCss);
      } else {
        const style = this.document.createElement('style');
        style.id = 'customStyle';
        head.appendChild(style);
        const renderer = this.rendererFactory.createRenderer(this.document, {
          id: '-1',
          encapsulation: ViewEncapsulation.None,
          styles: [],
          data: {}
        });
        let CSSElement  = renderer.createText(this.customizationCss);
        renderer.appendChild(style,CSSElement);
      }
    } catch (e) {
      console.error('Renderrer Error to append style ', e);
    }
  }
  private buildCss() {

    this.customizationCss = `
    :root {
      --portal-main-color: ` + this.layout.identity.mainColor+`;
      --portal-dark-color: ` + this.layout.identity.secondaryColor+`;
      --background-light-color:` + this.layout.backgrounds.light.color+`;
    }
    `;
    console.log(" create form css " , this.layout.backgrounds.form)
      //Search SVG
      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,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
      this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
      this.customizationCss = this.customizationCss.concat(' background:  '
      + "url('" + (this.layout.backgrounds.form.imageFile?(this.properties.utilsService + '/download/' +this.layout.backgrounds.form.imageFile): svg) + "') transparent no-repeat "+this.layout.backgrounds.form.position+" ;");
      this.customizationCss = this.customizationCss.concat("  background-size: cover !important;  ");
      this.customizationCss = this.customizationCss.concat("  height: inherit; }");

    //Button link SVG
    let arrow = `<svg width="23" height="11" viewBox="0 0 23 11" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="{{color}}" points="17 1 22 5.5 17 10 " /><line fill="none" stroke="{{color}}" x1="0" y1="5.5" x2="22.4" y2="5.5" /></svg>`;;
    let svg_arrow = 'data:image/svg+xml,' + encodeURIComponent(arrow.split('{{color}}').join(this.layout.identity.mainColor));
    this.customizationCss = this.customizationCss.concat('.uk-button-text::before {');
    this.customizationCss = this.customizationCss.concat(' background-image:  ' + "url('" + svg_arrow + "') !important}");

    this.customizationCss = this.customizationCss.concat('  .communityPanelBackground, .communityPanelBackground .uk-section-primary {');
    this.customizationCss = this.customizationCss.concat(' background-color:  ' + this.layout.backgrounds.dark.color + ';}');
    this.customizationCss = this.customizationCss.concat('  .uk-button:not(.uk-button-text){');
    this.customizationCss = this.customizationCss.concat(' border-radius:' + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : '4') + 'px;');
    this.customizationCss = this.customizationCss.concat(' }');


    this.customizationCss = this.customizationCss.concat('  .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):not(.uk-disabled), .portal-button:not(.uk-disabled) {');
    this.customizationCss = this.customizationCss.concat(' background-color:' + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + ';');
    this.customizationCss = this.customizationCss.concat(' color: ' + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) +  ';');
    this.customizationCss = this.customizationCss.concat('border-color: ' + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) +  ';');
    this.customizationCss = this.customizationCss.concat(' border-style: ' + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) +  ';');
    this.customizationCss = this.customizationCss.concat(' border-width: ' + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + 'px;');
    this.customizationCss = this.customizationCss.concat(' }');


    this.customizationCss = this.customizationCss.concat('  .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {');
    this.customizationCss = this.customizationCss.concat(' background-color:' + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : '#154B71') + ';');
    this.customizationCss = this.customizationCss.concat(' color: '+ (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : 'white') + ';');
    this.customizationCss = this.customizationCss.concat(' border-color: ' + (this.layout.buttons.lightBackground.onHover.borderColor != null ? this.layout.buttons.lightBackground.onHover.borderColor : 'transparent') + ';');
    this.customizationCss = this.customizationCss.concat(' }');
    /*Buttons*/
    this.customizationCss = this.customizationCss.concat('  .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {');
    this.customizationCss = this.customizationCss.concat( 'background-color: '  + this.layout.buttons.darkBackground.backgroundColor + '  !important;');
    this.customizationCss = this.customizationCss.concat(' color: '  + this.layout.buttons.darkBackground.color +  ' !important;');
    this.customizationCss = this.customizationCss.concat(' border-color: ' +  this.layout.buttons.darkBackground.borderColor + ' !important;');
    this.customizationCss = this.customizationCss.concat(' border-style: ' + this.layout.buttons.darkBackground.borderStyle + '  !important;');
    this.customizationCss = this.customizationCss.concat( 'border-width: ' + this.layout.buttons.darkBackground.borderWidth + 'px !important;');
    this.customizationCss = this.customizationCss.concat( 'border-radius:' + this.layout.buttons.darkBackground.borderRadius + 'px !important;');

    this.customizationCss = this.customizationCss.concat(' }');


    this.customizationCss = this.customizationCss.concat('  .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {');
    this.customizationCss = this.customizationCss.concat(' background-color: ' + this.layout.buttons.darkBackground.onHover.backgroundColor + ' !important;');
    this.customizationCss = this.customizationCss.concat(  'color: ' + this.layout.buttons.darkBackground.onHover.color + ' !important;');
    this.customizationCss = this.customizationCss.concat( 'border-color:' + this.layout.buttons.darkBackground.onHover.borderColor + '  !important;');
    this.customizationCss = this.customizationCss.concat(' }');
// console.debug(this.customizationCss)

  }
}