import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

const Color cColor = Color.fromARGB(234, 146, 234, 171);

class DisplayImage extends StatelessWidget {
  const DisplayImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final color = const Color.fromRGBO(64, 105, 225, 1);

    return StreamBuilder<DocumentSnapshot>(
      stream: FirebaseFirestore.instance
          .collection('users')
          .doc(FirebaseAuth.instance.currentUser!.uid)
          .snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }

        final data = snapshot.data!.data() as Map<String, dynamic>;
        final imageUrl = data['image_url'];

        return Center(
          child: Stack(
            children: [
              buildImage(color, imageUrl),
              Positioned(
                child: buildEditIcon(color),
                right: 4,
                top: 10,
              ),
            ],
          ),
        );
      },
    );
  }

  // Builds Profile Image
  Widget buildImage(Color color, String? imageUrl) {
    return CircleAvatar(
      radius: 75,
      backgroundColor: cColor,
      child: CircleAvatar(
        backgroundImage: imageUrl != null
            ? NetworkImage(imageUrl)
            : const NetworkImage(
                'https://firebasestorage.googleapis.com/v0/b/your-firebase-storage-url.com/o/admin%2Favatar.jpg?alt=media'),
        radius: 70,
      ),
    );
  }

  // Builds Edit Icon on Profile Picture
  Widget buildEditIcon(Color color) => buildCircle(
        all: 8,
        child: Icon(
          Icons.edit,
          color: color,
          size: 20,
        ),
      );

  // Builds/Makes Circle for Edit Icon on Profile Picture
  Widget buildCircle({
    required Widget child,
    required double all,
  }) =>
      ClipOval(
        child: Container(
          padding: EdgeInsets.all(all),
          color: Colors.white,
          child: child,
        ),
      );
}