import 'dart:async';
import 'dart:ui';

import 'package:flutter/material.dart';

class FikoytOvalResim extends StatefulWidget {
  final String resimUrl;
  final FikoYTOvalResimTheme? tema;

  const FikoytOvalResim({super.key, required this.resimUrl, this.tema});

  @override
  State<FikoytOvalResim> createState() => _FikoytOvalResimState();
}

class _FikoytOvalResimState extends State<FikoytOvalResim> {
  bool _isImageLoaded = false;

  @override
  void didUpdateWidget(covariant FikoytOvalResim oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.resimUrl != widget.resimUrl) {
      setState(() {
        _isImageLoaded = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          CircleAvatar(
            backgroundColor: widget.tema?.borderColor ?? Theme.of(context).extension<FikoYTOvalResimTheme>()?.borderColor ?? Colors.green.shade700,
            radius: (widget.tema?.radius ?? Theme.of(context).extension<FikoYTOvalResimTheme>()?.radius ?? 54) + (widget.tema?.spacing ?? Theme.of(context).extension<FikoYTOvalResimTheme>()?.spacing ?? 10.0),
          ),
          CircleAvatar(
            backgroundColor: widget.tema?.backgroundColor ?? Theme.of(context).extension<FikoYTOvalResimTheme>()?.backgroundColor ?? Colors.grey.shade200,
            radius: widget.tema?.radius ?? Theme.of(context).extension<FikoYTOvalResimTheme>()?.radius ?? 54,
            child: ClipOval(
              child: Stack(
                alignment: Alignment.center,
                children: [
                  AnimatedOpacity(
                    duration: const Duration(milliseconds: 500),
                    opacity: _isImageLoaded ? 1.0 : 0.0,
                    child: Image.network(
                      widget.resimUrl,
                      fit: BoxFit.cover,
                      loadingBuilder: (context, child, loadingProgress) {
                        if (loadingProgress == null) {
                          Future.delayed(Duration.zero, () {
                            if (mounted) {
                              setState(() {
                                _isImageLoaded = true;
                              });
                            }
                          });
                          return child;
                        }
                        return const SizedBox();
                      },
                    ),
                  ),
                  if (!_isImageLoaded)
                    const Center(
                      child: CircularProgressIndicator(),
                    ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class FikoYTOvalResimTheme extends ThemeExtension<FikoYTOvalResimTheme> {
  FikoYTOvalResimTheme({
    this.backgroundColor,
    this.borderColor,
    this.shadowColor,
    this.radius,
    this.spacing,
    this.elevation,
  });

  Color? backgroundColor;
  Color? borderColor;
  Color? shadowColor;
  double? radius;
  double? spacing;
  double? elevation;

  @override
  FikoYTOvalResimTheme copyWith({
    Color? backgroundColor,
    Color? borderColor,
    Color? shadowColor,
    double? radius,
    double? spacing,
    double? elevation,
  }) {
    return FikoYTOvalResimTheme(
      backgroundColor: backgroundColor ?? this.backgroundColor,
      radius: radius ?? this.radius,
      spacing: spacing ?? this.spacing,
      elevation: elevation ?? this.elevation,
      borderColor: borderColor ?? this.borderColor,
      shadowColor: shadowColor ?? this.shadowColor,
    );
  }

  @override
  FikoYTOvalResimTheme lerp(ThemeExtension<FikoYTOvalResimTheme> other, double t) {
    if (other is! FikoYTOvalResimTheme) {
      return this;
    }
    return FikoYTOvalResimTheme(
      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t),
      radius: lerpDouble(radius, other.radius, t),
      spacing: lerpDouble(spacing, other.spacing, t),
      elevation: lerpDouble(elevation, other.elevation, t),
      borderColor: Color.lerp(borderColor, other.borderColor, t),
      shadowColor: Color.lerp(shadowColor, other.shadowColor, t),
    );
  }
}