import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:mangayomi/modules/manga/reader/providers/reader_controller_provider.dart';
import 'package:mangayomi/modules/manga/reader/u_chap_data_preload.dart';
import 'package:mangayomi/modules/manga/reader/widgets/color_filter_widget.dart';
import 'package:mangayomi/modules/more/settings/reader/providers/reader_state_provider.dart';
import 'package:mangayomi/providers/l10n_providers.dart';
import 'package:mangayomi/utils/extensions/build_context_extensions.dart';
import 'package:mangayomi/utils/extensions/others.dart';
import 'package:mangayomi/modules/manga/reader/widgets/circular_progress_indicator_animate_rotate.dart';

class ImageViewVertical extends ConsumerWidget {
  final UChapDataPreload data;
  final Function(UChapDataPreload data) onLongPressData;
  final bool isHorizontal;

  final Function(bool) failedToLoadImage;

  const ImageViewVertical({
    super.key,
    required this.data,
    required this.onLongPressData,
    required this.failedToLoadImage,
    required this.isHorizontal,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final (colorBlendMode, color) = chapterColorFIlterValues(context, ref);
    final imageWidget = ExtendedImage(
      colorBlendMode: colorBlendMode,
      color: color,
      image: data.getImageProvider(ref, true),
      filterQuality: FilterQuality.medium,
      handleLoadingProgress: true,
      fit: getBoxFit(ref.watch(scaleTypeStateProvider)),
      enableLoadState: true,
      loadStateChanged: (state) {
        if (state.extendedImageLoadState == LoadState.completed) {
          failedToLoadImage(false);
        }
        if (state.extendedImageLoadState == LoadState.loading) {
          final ImageChunkEvent? loadingProgress = state.loadingProgress;
          final double progress = loadingProgress?.expectedTotalBytes != null
              ? loadingProgress!.cumulativeBytesLoaded /
                    loadingProgress.expectedTotalBytes!
              : 0;
          return Container(
            color: Colors.black,
            height: context.height(0.8),
            width: isHorizontal ? context.width(0.8) : null,
            child: CircularProgressIndicatorAnimateRotate(progress: progress),
          );
        }
        if (state.extendedImageLoadState == LoadState.failed) {
          failedToLoadImage(true);
          return Container(
            color: Colors.black,
            height: context.height(0.8),
            width: isHorizontal ? context.width(0.8) : null,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  context.l10n.image_loading_error,
                  style: TextStyle(color: Colors.white.withValues(alpha: 0.7)),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: GestureDetector(
                    onLongPress: () {
                      state.reLoadImage();
                      failedToLoadImage(false);
                    },
                    onTap: () {
                      state.reLoadImage();
                      failedToLoadImage(false);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: context.primaryColor,
                        borderRadius: BorderRadius.circular(30),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                          vertical: 8,
                          horizontal: 16,
                        ),
                        child: Text(context.l10n.retry),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        }
        return null;
      },
    );
    return GestureDetector(
      onLongPress: () => onLongPressData.call(data),
      child: isHorizontal
          ? imageWidget
          : Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if (data.index == 0)
                  SizedBox(height: MediaQuery.of(context).padding.top),
                imageWidget,
              ],
            ),
    );
  }
}