import { VscSignIn, VscSignOut } from 'react-icons/vsc'
import { useQuery, useQueryClient } from 'react-query';
import useUser from '../../api/hooks/useUser';
import useLogout from '../../api/hooks/useLogout';
import useRedirectToLoginPage from '../../api/hooks/useRedirectToLoginPage';
import MediaInfoComponent, { MediaInfoModel } from './view/MediaInfoComponent';
import { MediaInfo, MediaInfoType } from '../../api/models/Types';
import { useNavigate } from 'react-router-dom';
// import { userClient } from '../../api/axios';
// import { AxiosRequestConfig } from 'axios';
// import useAuth from '../../api/hooks/useAuth';

export const userQueryKey = 'user'; 

export default function UserShortComponent() {
	const { getUser } = useUser();
	// const { accessToken } = useAuth();
	const { data: user } = useQuery(userQueryKey, getUser);
	const queryClient = useQueryClient();
	const { logout } = useLogout();
	const { toLoginPage } = useRedirectToLoginPage();

	const navigate = useNavigate();
	const toUserDetails = () => navigate('/account');

	// const [avatarString, setAvatarString] = useState<string | null>(null);
	// const getAvatar = () : Promise<string | null> =>{
	// 	console.log(`getAvatar; accessToken: ${user?.accessToken ?? 'NULL'}`);
	// 	console.log(`getAvatar; accessToken2: ${accessToken ?? 'NULL'}`);
	// 	if (user == null){
	// 		return Promise.reject("No user");
	// 	}
	// 	else{
	// 		const config = {
	// 			url: 'avatar',
	// 			method: 'GET',
	// 			responseType: 'blob',
	// 		} as AxiosRequestConfig;
	// 		return userClient.request<Blob | null>(config)
	// 		.then((response) => {
	// 			if (response.data == null){
	// 				return Promise.reject();
	// 				// setAvatarString(null);
	// 			}
	// 			else{
	// 				return new Promise((resolve, reject) => {
	// 					const reader = new FileReader();
	// 					reader.onload = () => resolve(reader.result as string | null);
	// 					reader.onerror = reject;
	// 					reader.readAsDataURL(response.data!);
	// 				});
	// 			}
	// 		})
	// 		// .catch(() => setAvatarString(null));
	// 		// .catch(() => {return Promise.reject();});
	// 	}
	// };

	// const { data: avatarData } = useQuery<string | null>('UserAvatar', getAvatar);


	return (
		<>
			{/* <p>{JSON.stringify(user)}</p>
			<h2>User: {user == null ? 'null' : (`nickname=[${user.nickName == null ? 'null' : user.nickName}]`)}</h2>
			asdsaa */}
			{user != null &&
				<div className='row m-0 align-items-center'>
					{/* <div className='col-3'> */}
					<div className='col-auto' onClick={toUserDetails}>
						<MediaInfoComponent
							classes={'card-img-top rounded-3'}
							height='2.5rem'
							mediaInfo={user.avatarData?.url == null ? null : {
									type: user.avatarData.type,
									data: user.avatarData.url,
								} as MediaInfoModel}
							/>
					</div>
					{/* <div className='col-7'> */}
					<div className='col-auto user-select-all'>
						<h4>{user?.nickName}</h4>
					</div>
					
					{/* <div className='col-2'> */}
					<div className='col-2'>
						<div className='btn btn-outline-secondary' onClick={() => logout().then(() => queryClient.invalidateQueries({ queryKey: [userQueryKey] }))}><VscSignOut /></div>
					</div>
				</div>
			}
			{user == null &&
				<div className='row m-0'>				
					<div className='col-2'>
						<div className='btn btn-primary' onClick={() => toLoginPage()}><VscSignIn /></div>
					</div>
				</div>
			}
		</>
	)

	// if (user != null){
	// 	return (
	// 		<div className='row m-0 align-items-center'>
	// 			{/* <div className='col-3'> */}
	// 			<div className='col-auto'>
	// 				AVATAR
	// 				{/* <MediaInfoComponent
	// 					mediaInfo={user.avatarId}
	// 					/> */}
	// 				{user.avatarId}
	// 			</div>
	// 			{/* <div className='col-7'> */}
	// 			<div className='col-auto'>
	// 				<h4>{user?.nickName}</h4>
	// 			</div>
				
	// 			{/* <div className='col-2'> */}
	// 			<div className='col-2'>
	// 				<div className='btn btn-outline-secondary' onClick={() => logout()}><VscSignOut /></div>
	// 			</div>
	// 		</div>
	// 	)
	// }
	// if (user == null){
	// 	return (
	// 		<div className='row m-0'>				
	// 			<div className='col-2'>
	// 				<div className='btn btn-primary' onClick={() => toLoginPage()}><VscSignIn /></div>
	// 			</div>
	// 		</div>
	// 	)
	// }
}
