import React, { useEffect, useState } from 'react';
import { AvatarEnum } from '../../../model/user';
import IconButton from '../../common/IconButton';
import ArrowLeft from '../../icons/ArrowLeft';
import ArrowRight from '../../icons/ArrowRight';

interface AvatarProps {
  className?: string;
  onChangeAvatar: (avatar: string) => void;
}

const avatars = Object.values(AvatarEnum);

const Avatar: React.FC<AvatarProps> = ({ className, onChangeAvatar }) => {
  const [currentAvatar, setCurrentAvatar] = useState<number>(0);

  const onClickLeftButton = (): void => {
    setCurrentAvatar((currentAvatar - 1 + avatars.length) % avatars.length);
  };
  const onClickRightButton = (): void => {
    setCurrentAvatar((currentAvatar + 1) % avatars.length);
  };

  useEffect(() => {
    onChangeAvatar(avatars[currentAvatar]);
  }, [currentAvatar]);

  return (
    <div className={`avatar field vertical ${className || ''}`}>
      <span className="label">Avatar</span>
      <div className="avatarWrapper">
        <IconButton size="small" title="Anterior" onClick={onClickLeftButton}>
          <ArrowLeft size="medium" />
        </IconButton>
        <div className="image">
          <img
            alt="Avatar"
            src={`/img/avatars/${avatars[currentAvatar]}.png`}
          />
        </div>
        <IconButton size="small" title="Siguiente" onClick={onClickRightButton}>
          <ArrowRight size="medium" />
        </IconButton>
      </div>
    </div>
  );
};

export default Avatar;