import { Platform } from '@angular/cdk/platform';
import { DOCUMENT } from '@angular/common';
import { AfterViewInit, Component, Inject, NgZone, OnDestroy, OnInit } from '@angular/core';
import { I18NService } from '@core';
import { OHAYO_I18N_TOKEN } from '@ohayo/theme';
import AOS from 'aos';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  host: {
    '[class.home-wrapper]': 'true',
  },
})
export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
  list = [
    { type: 'basic', url: 'https://ohayojp.github.io/ohayojp' },
    { type: 'pro', url: 'https://e.ohayojp.com/theme/pro' },
    { type: 'ms', url: 'https://e.ohayojp.com/theme/ms' },
    { type: 'yun', url: 'https://e.ohayojp.com/theme/yun' },
  ];
  themes = ['pro', 'ms', 'yun'];
  get isBrowser(): boolean {
    return this.platform.isBrowser;
  }
  constructor(
    @Inject(OHAYO_I18N_TOKEN) public i18n: I18NService,
    private ngZone: NgZone,
    @Inject(DOCUMENT) private doc: Document,
    private platform: Platform,
  ) { }

  private get body(): HTMLElement {
    return this.doc.querySelector('body') as HTMLElement;
  }

  ngAfterViewInit(): void {
    if (!this.isBrowser) return;
    this.ngZone.runOutsideAngular(() => AOS.init());
  }

  ngOnInit(): void {
    this.body.classList.add(`index-page`);
  }

  ngOnDestroy(): void {
    this.body.classList.remove(`index-page`);
  }
}