import React, {ReactNode, useEffect, useState} from 'react';
import { useAppSelector } from '../stores/hooks';
import UserAvatar from './UserAvatar';

type Props = {
  className?: string;
  children?: ReactNode;
};

export default function UserAvatarCurrentUser({
                                                className = '',
                                                children,
                                              }: Props) {
  const userName = useAppSelector((state) => state.main.userName);
  const userAvatar = useAppSelector((state) => state.main.userAvatar);
  const { currentUser, isFetching, token } = useAppSelector(
      (state) => state.auth,
  );
  const { users, loading } = useAppSelector((state) => state.users);

  const [ avatar, setAvatar ] = useState(null)

  useEffect(() => {
    currentUserAvatarCheck()
  }, []);

  useEffect(() => {
    currentUserAvatarCheck()
  }, [currentUser?.id, users]);

  const currentUserAvatarCheck = () => {
    if (currentUser?.id) {
      const image = currentUser?.avatar;
      setAvatar(image);
    }
  }

  return (
      <UserAvatar username={userName} avatar={userAvatar} className={className} image={avatar}>
        {children}
      </UserAvatar>
  );
}