import { Component, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import Swiper from 'swiper';

@Component({
  selector: 'app-login-choice',
  standalone: true,
  imports: [CommonModule, RouterModule],
  templateUrl: './login-choice.html',
  styleUrls: ['./login-choice.scss']
})
export class LoginChoice implements AfterViewInit {
  currentYear = new Date().getFullYear();
  private swiper: Swiper | undefined;

  ngAfterViewInit(): void {
    new Swiper('.swiper-container', {
      slidesPerView: 1.1,
      spaceBetween: 15,
      centeredSlides: true
    });
  }

  private initSwiper(): void {
    this.swiper = new Swiper('.swiper-container', {
      effect: 'slide',
      resistanceRatio: 0.3,
      touchAngle: 30,
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 1.1, // 让两侧露出一点点
      spaceBetween: 20,
    });
  }

  private createDynamicEffects(): void {
    // 创建波纹动画
    const createRipple = (parent: HTMLElement, color: string) => {
      const ripple = document.createElement('div');
      ripple.className = 'ripple';
      ripple.style.backgroundColor = color;
      ripple.style.left = `${Math.random() * 80 + 10}%`;
      ripple.style.top = `${Math.random() * 80 + 10}%`;
      parent.appendChild(ripple);
      setTimeout(() => ripple.remove(), 2000);
    };

    // 为面试者卡片添加蓝色波纹
    const interviewerSlide = document.querySelector('.slide-interviewer');
    if (interviewerSlide) {
      setInterval(() => createRipple(interviewerSlide as HTMLElement, 'rgba(100, 200, 255, 0.3)'), 1200);
    }

    // 为HR卡片添加紫色数据流动画
    const hrSlide = document.querySelector('.slide-hr');
    if (hrSlide) {
      setInterval(() => {
        const dataFlow = document.createElement('div');
        dataFlow.className = 'data-flow';
        dataFlow.style.left = `${Math.random() * 80 + 10}%`;
        hrSlide.appendChild(dataFlow);
        setTimeout(() => dataFlow.remove(), 1000);
      }, 800);
    }
  }
}
