import {Component, HostListener, inject} from '@angular/core';
import {Router, RouterLink} from '@angular/router';
import {TranslatePipe, TranslateService} from '@ngx-translate/core';
import {TUI_DARK_MODE, TuiAppearance, TuiButton, TuiDialog, TuiIcon} from '@taiga-ui/core';
import {TuiCardLarge} from '@taiga-ui/layout';
import {TuiBadge} from '@taiga-ui/kit';
import {FaIconComponent} from '@fortawesome/angular-fontawesome';
import {
  faAndroid,
  faApple,
  faAppStoreIos,
  faGooglePlay,
  faLinux,
  faMicrosoft,
  faWindows
} from '@fortawesome/free-brands-svg-icons';
import {faDesktop, faRecordVinyl} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-homepage',
  imports: [
    TranslatePipe,
    TuiButton,
    RouterLink,
    TuiIcon,
    TuiCardLarge,
    TuiDialog,
    TuiAppearance,
    TuiBadge,
    FaIconComponent
  ],
  templateUrl: './homepage.html',
  styleUrl: './homepage.scss',
})
export class Homepage {
  public router = inject(Router);
  translateService = inject(TranslateService)
  darkMode = inject(TUI_DARK_MODE)
  get theme(): string {
    return this.darkMode() ? "dark" : "light"
  }

  androidBetaTestDialogOpen = false;
  appleBetaTestDialogOpen = false;
  msBetaTestDialogOpen = false;

  cookieConsentOpen = false;

  mainFeatureIndex = 0
  features: { icon: string, title: string, color: string }[] = [
    {
      icon: "circle-gauge",
      title: "fast",
      color: "#ff3d32"
    },
    {
      icon: "lock",
      title: "secure",
      color: "#22c55e"
    },
    {
      icon: "speech",
      title: "independent",
      color: "#326fd1"
    }
  ]

  scrollerOpacity = 1;

  @HostListener('window:scroll', ['$event'])
  onScroll(event: Event) {
    const scrollTop = window.scrollY;
    const docHeight = document.getElementById("hero")?.clientHeight ?? 0;

    let scrollPercent = scrollTop / docHeight;
    if (scrollPercent > 1) scrollPercent = 1; // clamp at max

    this.scrollerOpacity = 1 - scrollPercent; // invert
  }

  contact() {
    const mail = 'mailto:personal@alms.hu';
    const a = document.createElement('a');
    a.href = mail;
    a.click();
  }

  enterGGroup() {
    window.open('https://groups.google.com/g/chatenium-closed-alpha-testing', '_blank');
  }

  openTestFlight() {
    window.open('https://testflight.apple.com/join/ATGmZ8mx', '_blank')
  }

  openRoadmap() {
    window.open('https://help.chatenium.hu/s/169154db-df3e-44cb-980d-2db1915ecdf8', '_blank')
  }

  openMsStore() {
    window.open('https://apps.microsoft.com/detail/9p1xq5vb62b0?ocid=webpdpshare', '_blank')
  }

  openBlog() {
    window.open('https://blog.chatenium.hu', '_blank')
  }

  openHelp() {
    window.open('https://help.chatenium.hu/s/06a56637-0050-4332-b397-ea3ca8fa91a5', '_blank')
  }

  openAPISpecs() {
    window.open('https://apispecs.chatenium.hu', '_blank')
  }

  gotoFunctions() {
    location.href = "#functions"
  }

  stepFeature = () => {
    console.log(this.features, this.mainFeatureIndex + 1, this.mainFeatureIndex);
    if (this.features && this.features[this.mainFeatureIndex + 1] !== undefined) {
      this.mainFeatureIndex++;
    } else {
      this.mainFeatureIndex = 0;
    }
  };

  consent() {
    localStorage.setItem("cookieConsentRead", "true")
    this.cookieConsentOpen = false;
  }

  ngOnInit(): void {
    const consentOk = localStorage.getItem("cookieConsentRead")
    if (!consentOk) {
      this.cookieConsentOpen = true
    }
  }

  protected readonly window = window;
  protected readonly scroll = scroll;
  protected readonly localStorage = localStorage;
  protected readonly faApple = faApple;
  protected readonly faAndroid = faAndroid;
  protected readonly faWindows = faWindows;
  protected readonly faLinux = faLinux;
  protected readonly faRecordVinyl = faRecordVinyl;
  protected readonly faDesktop = faDesktop;
  protected readonly faGooglePlay = faGooglePlay;
  protected readonly faAppStoreIos = faAppStoreIos;
  protected readonly faMicrosoft = faMicrosoft;
}
