import 'package:flutter/material.dart';
import 'package:location/resource/colors.gen.dart';

class OverlappingAvatars extends StatelessWidget {
  final List<String> avatarUrls;
  final double size;
  final double overlap;
  final Color borderColor;
  final double borderWidth;
  final int maxDisplay;
  final String moreText;
  final TextStyle moreTextStyle;

  const OverlappingAvatars({
    Key? key,
    required this.avatarUrls,
    this.size = 40.0,
    this.overlap = 0.2,
    this.borderColor = Colors.white,
    this.borderWidth = 2.0,
    this.maxDisplay = 4,
    this.moreText = '+%d',
    this.moreTextStyle = const TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 12,
    ),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final displayCount = avatarUrls.length > maxDisplay
        ? maxDisplay
        : avatarUrls.length;
    final remainingCount = avatarUrls.length - displayCount;

    final widgets = <Widget>[];

    for (var i = 0; i < displayCount; i++) {
      widgets.add(
        Container(
          width: size,
          height: size,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: borderColor,
              width: borderWidth,
            ),
          ),
          child: CircleAvatar(
            backgroundImage: NetworkImage(avatarUrls[i]),
          ),
        ),
      );
    }

    if (remainingCount > 0) {
      widgets.add(
        Container(
          width: size,
          height: size,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.grey[300],
            border: Border.all(
              color: ColorName.white,//borderColor,
              width: borderWidth,
            ),
          ),
          child: Center(
            child: Text(
              moreText.replaceAll('%d', remainingCount.toString()),
              style: moreTextStyle,
            ),
          ),
        ),
      );
    }

    return Stack(
      children: List.generate(widgets.length, (index) {
        return Positioned(
          left: (size * overlap) * index,
          child: widgets[index],
        );
      }),
    );
  }
}