// 슬라이더 및 Trail 요소
const slider = document.querySelector(".slider");
const trail = document.querySelectorAll(".trail div");


// 상태 관리 변수
let tValue = 0; // Transform 값
let trailValue = 0; // Trail 인덱스 값
let start; // 자동 재생 타이머 ID
const interval = 10000; // 자동 재생 시간


// 버튼 요소
const pauseButton = document.querySelector(".sliderPause");
const playButton = document.querySelector(".sliderPlay");


// GSAP 애니메이션 설정
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power2.inOut" } });
tl.from(".bg", { x: "-100%", opacity: 0 })
  .from(".details p", { opacity: 0 }, "-=0.2")
  .from(".slider h1", { opacity: 0, y: "30px" }, "-=0.9")
  .from(".details button", { opacity: 1, y: "10px" }, "-=0.8")
  .from(".illustration .inner", { opacity: 0, y: "30px" }, "-=0.9");


// 슬라이드 이동 및 Trail 업데이트
const moveSlide = () => {
  slider.style.transform = `translateX(-${tValue}%)`;
  trail.forEach((cur, idx) =>
    cur.classList.toggle("active", idx === trailValue)
  );
};


// Trail 업데이트 함수
const updateTrailValue = () => {
  trailValue = Math.floor(tValue / 25); // tValue를 기준으로 trailValue 계산
};


// 슬라이드 함수
const slide = (direction) => {
  if (direction === "increase") {
    tValue = tValue === 75 ? 0 : tValue + 25;
  } else {
    tValue = tValue === 0 ? 75 : tValue - 25;
  }
  updateTrailValue();
  moveSlide();
  animate();
};


// 애니메이션 재시작
const animate = () => {
  tl.restart();
};


// 자동 재생 시작
const startAutoPlay = () => {
  clearInterval(start); // 기존 타이머 제거
  pauseButton.style.display = "block";
  playButton.style.display = "none";
  start = setInterval(() => slide("increase"), interval);
};


// 자동 재생 중지
const stopAutoPlay = () => {
  clearInterval(start); // 타이머 중지
  pauseButton.style.display = "none";
  playButton.style.display = "block";
};


// Trail 클릭 이벤트 핸들러
const onTrailClick = (e) => {
  stopAutoPlay(); // 자동 재생 중지
  const targetIndex = Array.from(trail).indexOf(e.target);
  if (targetIndex !== -1) {
    tValue = targetIndex * 25;
    updateTrailValue();
    moveSlide();
    animate();
  }
};


// 다음/이전 버튼 클릭 이벤트
document.querySelectorAll(".svg").forEach((button) => {
  button.addEventListener("click", () => {
    stopAutoPlay(); // 자동 재생 중지
    slide(button.classList.contains("next") ? "increase" : "decrease");
  });
});


// 재생/일시정지 버튼 클릭 이벤트
pauseButton.addEventListener("click", stopAutoPlay);
playButton.addEventListener("click", startAutoPlay);


// Trail 클릭 이벤트 추가
trail.forEach((el) => el.addEventListener("click", onTrailClick));


// 터치 이벤트
(() => {
  let startX, changeX, sliderWidth;


  slider.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    sliderWidth = slider.clientWidth / trail.length;
  });


  slider.addEventListener("touchmove", (e) => {
    changeX = e.touches[0].clientX - startX;
  });


  slider.addEventListener("touchend", () => {
    if (changeX > sliderWidth / 4) slide("decrease");
    if (changeX < -sliderWidth / 4) slide("increase");
    changeX = 0;
  });
})();


// DOMContentLoaded에서 자동 재생 시작
document.addEventListener("DOMContentLoaded", startAutoPlay);