import 'dart:typed_data';

import 'package:didvan/widgets/shimmer_placeholder.dart';
import 'package:http/http.dart' as http;
import 'package:cached_network_image/cached_network_image.dart';
import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/services/network/request.dart';
import 'package:didvan/services/network/request_helper.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';

class SkeletonImage extends StatefulWidget {
  final String imageUrl;
  final double width;
  final double height;
  final BorderRadius? borderRadius;
  const SkeletonImage({
    Key? key,
    required this.imageUrl,
    required this.width,
    required this.height,
    this.borderRadius = DesignConfig.lowBorderRadius,
  }) : super(key: key);

  @override
  State<SkeletonImage> createState() => _SkeletonImageState();
}

class _SkeletonImageState extends State<SkeletonImage> {
  Uint8List? _bytes;

  @override
  void initState() {
    if (kIsWeb) _getImage();
    super.initState();
  }

  Future<void> _getImage() async {
    _bytes = (await http.get(
      Uri.parse(RequestHelper.baseUrl + widget.imageUrl),
      headers: {'Authorization': 'Bearer ${RequestService.token}'},
    ))
        .bodyBytes;
    if (mounted) {
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    if (kIsWeb) {
      if (_bytes == null || _bytes!.isEmpty) {
        return ShimmerPlaceholder(
          width: widget.width,
          height: widget.height,
          borderRadius: widget.borderRadius,
        );
      }
      return ClipRRect(
        borderRadius: widget.borderRadius,
        child: Image.memory(
          _bytes!,
          width: widget.width,
          height: widget.height,
          fit: BoxFit.cover,
        ),
      );
    }
    return CachedNetworkImage(
      httpHeaders: {'Authorization': 'Bearer ${RequestService.token}'},
      width: widget.width,
      height: widget.height,
      imageUrl: RequestHelper.baseUrl + widget.imageUrl,
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          borderRadius: widget.borderRadius ?? DesignConfig.lowBorderRadius,
          image: DecorationImage(
            image: imageProvider,
            fit: BoxFit.cover,
          ),
        ),
      ),
      progressIndicatorBuilder: (context, url, progress) => SkeletonAnimation(
        shimmerColor: Theme.of(context).colorScheme.border,
        borderRadius: widget.borderRadius ?? DesignConfig.lowBorderRadius,
        child: Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.disabledBackground,
            borderRadius: widget.borderRadius,
          ),
          height: widget.height,
          width: widget.width,
        ),
      ),
    );
  }
}