import { useEffect, useState } from 'react';
import { ICharacterProps } from '../components/Character/CharacterSelection';

export const useCharacterSkinNavigation = (
  availableCharacters: ICharacterProps[],
  itemKey: string
) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    setCurrentIndex(0);
  }, [itemKey]);

  const handlePreviousSkin = () => {
    setCurrentIndex(prevIndex =>
      prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1
    );
  };

  const handleNextSkin = () => {
    setCurrentIndex(prevIndex =>
      prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1
    );
  };

  const currentCharacter = availableCharacters[currentIndex];

  return {
    currentIndex,
    currentCharacter,
    handlePreviousSkin,
    handleNextSkin,
  };
};
