import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

//CTA animation
const ctaTl = gsap.timeline({
  scrollTrigger: {
    trigger: '#cta',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 1,
  },
});

ctaTl.to('.book-star_img', {
  rotateZ: 60,
});

//Tokens Functionality

const tokensAll = [
  'token-01',
  'token-02',
  'token-03',
  'token-04',
  'token-05',
  'token-06',
  'token-07',
  'token-08',
  'token-09',
  'token-10',
];

let tokensCollected: string[] = getCollectedTokensFromStorage();
let tokensUncollected = tokensAll.filter((token) => !tokensCollected.includes(token));
const tokenFadeOut = { scale: 0, opacity: 0, rotateZ: 180, ease: 'none', duration: 0.375 };

// Functions local storage
function getCollectedTokensFromStorage(): string[] {
  const tokens = localStorage.getItem('collectedTokens');
  return tokens ? JSON.parse(tokens) : [];
}

function setCollectedTokensToStorage(tokens: string[]): void {
  localStorage.setItem('collectedTokens', JSON.stringify(tokens));
}

//Token click function
const handleTokenClick = (event: Event) => {
  const target = event.target as HTMLElement;
  const tokenId = target.id;

  if (tokensCollected.includes(tokenId)) {
    return;
  }

  tokensCollected.push(tokenId);
  tokensUncollected = tokensUncollected.filter((token) => token !== tokenId);

  gsap.to(target, tokenFadeOut);

  setCollectedTokensToStorage(tokensCollected);
  updateProgress();
};

//Update progress function
const updateProgress = () => {
  const completedPercentage = (tokensCollected.length / tokensAll.length) * 100;
  const completedString = `${tokensCollected.length}/${tokensAll.length}`;

  const progressBar = document.getElementById('loyalty-current') as HTMLElement;
  const progressCounter = document.getElementById('loyalty-counter') as HTMLElement;

  progressBar.style.width = `${completedPercentage}%`;
  progressCounter.innerText = completedString;

  if (tokensCollected.length === tokensAll.length) {
    gsap.to('.loyalty-win', { height: 'auto' });
  }
};

// Reset function
const resetTokens = () => {
  tokensCollected = [];
  tokensUncollected = [...tokensAll];

  setCollectedTokensToStorage(tokensCollected);
  updateProgress();

  gsap.to('.loyalty-win', { height: '0px' });
  gsap.to('.token', { scale: 1, opacity: 1, rotateZ: 0, ease: 'none', duration: 0.375 });
};

// Listen for click
document.querySelectorAll('.token').forEach((token) => {
  token.addEventListener('click', handleTokenClick);
});

// Listen for reset
document.getElementById('loyalty-reset')?.addEventListener('click', resetTokens);

//Init
const init = () => {
  tokensCollected.forEach((tokenId) => {
    const tokenElement = document.getElementById(tokenId);
    if (tokenElement) {
      gsap.to(tokenElement, { ...tokenFadeOut, delay: 0.25 });
    }
  });

  const barAnim = gsap.timeline();
  barAnim.set('.loyalty', { visibility: 'visible' }).from('.loyalty', { opacity: 0, delay: 0.25 });

  updateProgress();
};

init();