import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
import {MenuItem} from './openaireLibrary/sharedComponents/menu';
import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
import {Session, User} from './openaireLibrary/login/utils/helper.class';
import {UserManagementService} from "./openaireLibrary/services/user-management.service";
import {ConfigurationService} from "./openaireLibrary/utils/configuration/configuration.service";
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
import {Subscriber} from "rxjs";
import {Meta} from "@angular/platform-browser";
import {properties} from "../environments/environment";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {SEOService} from "./openaireLibrary/sharedComponents/SEO/SEO.service";
import {OpenaireEntities} from "./openaireLibrary/utils/properties/searchFields";
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {QuickContactComponent} from './openaireLibrary/sharedComponents/quick-contact/quick-contact.component';
import {EmailService} from './openaireLibrary/utils/email/email.service';
import {Composer} from "./openaireLibrary/utils/email/composer";
import {AlertModal} from './openaireLibrary/utils/modal/alert';
import {NotificationHandler} from "./openaireLibrary/utils/notification-handler";
import {QuickContactService} from './openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
import {LayoutService} from './openaireLibrary/dashboard/sharedComponents/sidebar/layout.service';

@Component({
  selector: 'app-root',
  template: `
    <navbar *ngIf="properties && header" [header]="header" [portal]="properties.dashboard" [properties]=properties
            [onlyTop]=false [user]="user"
            [communityId]="properties.adminToolsCommunity" [userMenuItems]=userMenuItems [menuItems]=menuItems></navbar>
    <div *ngIf="loading">
        <loading [full]="true"></loading>
    </div>
    <schema2jsonld *ngIf="properties" [URL]="properties.domain+properties.baseLink"
                   [logoURL]="properties.domain+properties.baseLink+'/assets/common-assets/logo-services/explore/main.svg'"
                   type="home"
                   name="OpenAIRE | Find and Share research"
                   description="OpenAIRE Explore: Over 100M of research deduplicated, 170K research software, 11M research data. One of the largest open scholarly records collection worldwide."></schema2jsonld>
    <div [class.uk-hidden]="loading" [ngClass]="rootClass">
      <div id="modal-container"></div>
      <main>
        <router-outlet></router-outlet>
      </main>
    </div>
    <cookie-law *ngIf="isClient" position="bottom">
      <span class="uk-visible@m">OpenAIRE uses cookies in order to function properly.<br>
      Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing
        experience possible.</span>
      By using the OpenAIRE portal you accept our use of cookies. <a
        href="https://www.openaire.eu/privacy-policy#cookies" target="_blank"> Read more <span class="uk-icon">
              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right"
                   ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
              </span></a>
    </cookie-law>
    <bottom id="bottom" #bottom *ngIf="isClient && properties" [properties]="properties"></bottom>
		<quick-contact #quickContact *ngIf="bottomNotIntersecting && displayQuickContact && showQuickContact && contactForm" (sendEmitter)="send($event)"
			[contactForm]="contactForm" [sending]="sending" [contact]="'Help'" class="uk-visible@m"></quick-contact>
		<modal-alert #modal [overflowBody]="false"></modal-alert>
  `
})
export class AppComponent implements AfterViewInit {
  loading: boolean = false;
  rootClass: string;
  isClient: boolean = false;
  userMenuItems: MenuItem[] = [];
  menuItems: MenuItem [] = [];
  feedbackmail: string;
  properties: EnvProperties = properties;
  user: User;
  header: Header;
  /* Contact */
  public showQuickContact: boolean;
  public bottomNotIntersecting: boolean;
  public displayQuickContact: boolean;  // intersecting with specific section in home page
	public contactForm: FormGroup;
	public sending: boolean = false;
	@ViewChild('quickContact') quickContact: QuickContactComponent;
	@ViewChild('modal') modal: AlertModal;
	@ViewChild('bottom', {read: ElementRef}) bottom: ElementRef;

  subscriptions = [];
  
  constructor(private  route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
              private router: Router, private userManagementService: UserManagementService, private smoothScroll: SmoothScroll,
              private configurationService: ConfigurationService, private _meta: Meta, private seoService: SEOService,
							private emailService: EmailService, private fb: FormBuilder, private quickContactService: QuickContactService,
							private layoutService: LayoutService, private cdr: ChangeDetectorRef) {
  }
  
  ngOnInit() {
    if (typeof document !== 'undefined') {
      this.isClient = true;
    }
    this.configurationService.initPortal(this.properties, this.properties.adminToolsCommunity);
    this.feedbackmail = this.properties.feedbackmail;
    if (this.properties.environment == "production" || this.properties.environment == "development") {
      this.subscriptions.push(this.route.queryParams.subscribe(data => {
        this._meta.updateTag({content: 'all', name: 'robots'});
        this.seoService.removeLinkForPrevURL();
        this.seoService.removeLinkForNextURL();
      }));
    }
    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
      this.user = user;
      this.buildMenu();
      this.header = {
        route: "/",
        url: null,
        title: 'explore',
        logoUrl: 'assets/common-assets/logo-services/explore/main.svg',
        logoSmallUrl: 'assets/common-assets/logo-services/explore/small.svg',
        position: 'left',
        badge: true
      };
			this.reset();
    }));
    this.subscriptions.push(this.layoutService.hasQuickContact.subscribe(hasQuickContact => {
      if(this.showQuickContact !== hasQuickContact) {
        this.showQuickContact = hasQuickContact;
        this.cdr.detectChanges();
      }
    }));
		this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => {
      if(this.displayQuickContact !== display) {
        this.displayQuickContact = display;
        this.cdr.detectChanges();
      }
    }));
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        subscription.unsubscribe();
      } else if (typeof IntersectionObserver !== "undefined" && subscription instanceof IntersectionObserver) {
        subscription.disconnect();
      }
    });
    this.configurationService.clearSubscriptions();
    this.userManagementService.clearSubscriptions();
    this.smoothScroll.clearSubscriptions();
  }

	ngAfterViewInit() {
		if (typeof window !== "undefined") {
      this.createObservers();
      this.subscriptions.push(this.layoutService.rootClass.subscribe(rootClass => {
        this.loading = true;
        this.cdr.detectChanges();
        if (rootClass && this.isClient) {
          let link = <HTMLLinkElement>document.getElementById('theme');
          let append = false;
          if (!link) {
            link = document.createElement('link');
            link.rel = 'stylesheet';
            link.id = 'theme';
            append = true;
          }
          link.href = rootClass + '.css';
          link.onerror = (error) => console.log(error);
          if (append) {
            document.head.appendChild(link);
          }
        }
        this.rootClass = rootClass;
        this.cdr.detectChanges();
        setTimeout(() => {
          this.loading = false;
          this.cdr.detectChanges();
        }, 500)
      }));
    }
	}

	createObservers() {
		let options = {
			root: null,
			rootMargin: '0px',
			threshold: 0.1
		};
		let intersectionObserver = new IntersectionObserver(entries => {
			entries.forEach(entry => {
        if(this.bottomNotIntersecting !== (!entry.isIntersecting)) {
          this.bottomNotIntersecting = !entry.isIntersecting;
          this.cdr.detectChanges();
        }
      });
		}, options);
		intersectionObserver.observe(this.bottom.nativeElement);
		this.subscriptions.push(intersectionObserver);
	}
  
  buildMenu() {
		this.userMenuItems = [];
		this.userMenuItems.push(new MenuItem("", "My profile", "", "", false, [], [], {}));
    if(this.properties.environment != "beta") {
      this.userMenuItems.push(new MenuItem("", "My ORCID links", "", "/my-orcid-links", false, [], [""], {}));
    }
    this.userMenuItems.push(new MenuItem("", "My links", "", "/myclaims", false, [], ["/myclaims"], {}));
    let researchOutcomesMenu = new MenuItem("", OpenaireEntities.RESULTS, "", "/search/find/research-outcomes", false, [], ["/search/find/research-outcomes"], {});
    researchOutcomesMenu.items = [
      new MenuItem("", OpenaireEntities.PUBLICATIONS, "", "/search/find/research-outcomes", false, [], ["/search/find/research-outcomes"], {type: '"' + encodeURIComponent("publications") + '"'}),
      new MenuItem("", OpenaireEntities.DATASETS, "", "/search/find/research-outcomes", false, [], ["/search/find/research-outcomes"], {type: '"' + encodeURIComponent("datasets") + '"'}),
      new MenuItem("", OpenaireEntities.SOFTWARE, "", "/search/find/research-outcomes", false, [], ["/search/find/research-outcomes"], {type: '"' + encodeURIComponent("software") + '"'}),
      new MenuItem("", OpenaireEntities.OTHER, "", "/search/find/research-outcomes", false, [], ["/search/find/research-outcomes"], {type: '"' + encodeURIComponent("other") + '"'})];
    //TODO add check for research results route
    this.menuItems = [
      new MenuItem("search", "Search", "", "/search/find/research-outcomes", false, [], ["/search/find/research-outcomes"], {},
        null, null, null, null, "_blank", "internal", false,
        [
          researchOutcomesMenu,
          new MenuItem("", OpenaireEntities.PROJECTS, "", "/search/find/projects/", false, ["project"], ["/search/find/projects"], {}),
          new MenuItem("", OpenaireEntities.DATASOURCES, "", "/search/find/dataproviders", false, ["datasource"], ["/search/find/dataproviders"], {}),
          new MenuItem("", OpenaireEntities.ORGANIZATIONS, "", "/search/find/organizations/", false, ["organization"], ["/search/find/organizations"], {})
        ]
      ),
      new MenuItem("deposit", "Deposit", "", "/participate/deposit/learn-how", false, [], ["/participate/deposit/learn-how"], {}),
      new MenuItem("link", "Link", "", "/participate/claim", false, [], ["/participate/claim"], {},
        null, null, null, null, "_blank", "internal", false,
        [new MenuItem("", "Start linking", "", "/participate/claim", false, [], ["/participate/claim"], {}),
          new MenuItem("", "Learn more", this.properties.claimsInformationLink, "", false, [], [], {})]
      ),
      new MenuItem("datasources", OpenaireEntities.DATASOURCES, "", "", false, ["datasource"], [], {},
        null, null, null, null, "_blank", "internal", false,
        [new MenuItem("", "Data Policies", "https://beta.openaire.eu/oa-policies-mandates", "", false, ["datasource"], [""], {}),
          new MenuItem("", "Repositories", "", "/search/content-providers", false, ["datasource"], ["/search/content-providers"], {}),
          new MenuItem("", "Journals", "", "/search/journals", false, ["datasource"], ["/search/journals"], {}),
          new MenuItem("", "Registries", "", "/search/entity-registries", false, ["datasource"], ["/search/entity-registries"], {}),
          new MenuItem("", "Browse all", "", "/search/find/dataproviders", false, ["datasource"], ["/search/find/dataproviders"], {})]
      ),
      new MenuItem("funders", "Funders", "", "/funders", false, [], ["/funders"], {}),
    ];
    if (Session.isPortalAdministrator(this.user)) {
      this.userMenuItems.push(new MenuItem("", "Manage all links", "", "/claims", false, [], ["/claims"], {}));
      this.userMenuItems.push(new MenuItem("", "Manage helptexts", this.properties.adminPortalURL + "/openaire/admin-tools/pages", "", true, [], [], {}));
    } else if (Session.isClaimsCurator(this.user)) {
      this.userMenuItems.push(new MenuItem("", "Manage all links", "", "/claims", false, [], ["/claims"], {}));
      
    }
    if (this.user) {
      this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
    }
  }

	public send(event) {
    if (event.valid === true) {
      this.sendMail(this.properties.admins);
    }
  }

	private sendMail(admins: string[]) {
    this.sending = true;
    this.subscriptions.push(this.emailService.contact(this.properties,
      Composer.composeEmailForExplore(this.contactForm.value, admins),
      this.contactForm.value.recaptcha).subscribe(
      res => {
        if (res) {
          this.sending = false;
          this.reset();
          this.modalOpen();
        } else {
          this.handleError('Email <b>sent failed!</b> Please try again.');
        }
      },
      error => {
        this.handleError('Email <b>sent failed!</b> Please try again.', error);
      }
    ));
  }

	public reset() {
    if (this.quickContact) {
      this.quickContact.close();
    }
    this.contactForm = this.fb.group({
      name: this.fb.control('', Validators.required),
      surname: this.fb.control('', Validators.required),
      email: this.fb.control('', [Validators.required, Validators.email]),
      affiliation: this.fb.control(''),
      message: this.fb.control('', Validators.required),
      recaptcha: this.fb.control('', Validators.required),
    });
  }

	public modalOpen() {
    this.modal.okButton = true;
    this.modal.alertTitle = 'Your request has been successfully submitted';
    this.modal.message = 'Our team will respond to your submission soon.';
    this.modal.cancelButton = false;
    this.modal.okButtonLeft = false;
    this.modal.okButtonText = 'OK';
    this.modal.open();
  }

	handleError(message: string, error = null) {
    if (error) {
      console.error(error);
    }
    this.sending = false;
    this.quickContact.close();
    NotificationHandler.rise(message, 'danger');
    this.contactForm.get('recaptcha').setValue('');
  }
}