// ignore_for_file: deprecated_member_use

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:hoshan/ui/screens/gmedia/cubit/effects_cubit.dart';
import 'package:hoshan/ui/theme/text.dart';
import 'package:hoshan/ui/widgets/components/button/loading_button.dart';
import 'package:hoshan/ui/widgets/components/image/network_image.dart';
import 'package:popover/popover.dart';

class EffectsBtn extends StatelessWidget {
  final Function(String name)? onClick;
  const EffectsBtn({super.key, this.onClick});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: LoadingButton(
          width: double.infinity,
          onPressed: () async {
            showPopover(
              context: context,
              bodyBuilder: (context) => EffectsScreen(
                onClick: onClick,
              ),
              direction: PopoverDirection.bottom,
              // constraints: const BoxConstraints(
              //     minWidth: 200,
              //     maxWidth: 600,
              //     maxHeight: 600,
              //     minHeight: 200),

              arrowHeight: 15,
              arrowWidth: 30,
              radius: 16,
              barrierDismissible: true,

              backgroundColor: Theme.of(context).scaffoldBackgroundColor,
            );
          },
          backgroundColor: Theme.of(context).colorScheme.primary,
          child: Text(
            'بارگذاری عکس',
            style: AppTextStyles.body4.copyWith(color: Colors.white),
          )),
    );
  }
}

class EffectsScreen extends StatefulWidget {
  final Function(String name)? onClick;
  const EffectsScreen({super.key, this.onClick});

  @override
  State<EffectsScreen> createState() => _EffectsScreenState();
}

class _EffectsScreenState extends State<EffectsScreen> {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<EffectsCubit>(
      create: (context) => EffectsCubit()..getAllEffects(),
      child: Container(
        width: MediaQuery.sizeOf(context).width * 0.8,
        height: MediaQuery.sizeOf(context).height * 0.5,
        padding: const EdgeInsets.all(16),
        child: Directionality(
          textDirection: TextDirection.rtl,
          child: Column(
            children: [
              ListTile(
                title: Text(
                  '✨ افکت‌ها',
                  style: AppTextStyles.body3
                      .copyWith(color: Theme.of(context).colorScheme.onSurface),
                ),
              ),
              Expanded(
                child: Scrollbar(
                  thumbVisibility: true,
                  trackVisibility: true,
                  interactive: true,
                  child: BlocBuilder<EffectsCubit, EffectsState>(
                    builder: (context, state) {
                      if (state is EffectsFail) {
                        return const SizedBox.shrink();
                      }
                      if (state is EffectsSuccess) {
                        return ListView.builder(
                          itemCount: state.effectsModel.effects?.length,
                          physics: const BouncingScrollPhysics(),
                          shrinkWrap: true,
                          padding: const EdgeInsets.only(left: 16),
                          itemBuilder: (context, index) {
                            final effect = state.effectsModel.effects![index];
                            return Padding(
                              padding:
                                  const EdgeInsets.symmetric(vertical: 8.0),
                              child: InkWell(
                                onTap: () {
                                  widget.onClick?.call(effect.name!);
                                  context.pop();
                                },
                                child: Stack(
                                  children: [
                                    AspectRatio(
                                      aspectRatio: 16 / 9,
                                      child: ImageNetwork(
                                          radius: 16, url: effect.gif ?? ''),
                                    ),
                                    Positioned.fill(
                                      child: Container(
                                        padding: const EdgeInsets.all(8),
                                        decoration: BoxDecoration(
                                          gradient: LinearGradient(
                                            colors: [
                                              Colors.black.withOpacity(0.5),
                                              Colors.transparent
                                            ],
                                            begin: Alignment.bottomCenter,
                                            end: Alignment.topCenter,
                                          ),
                                          borderRadius:
                                              BorderRadius.circular(16),
                                        ),
                                        alignment: Alignment.bottomRight,
                                        child: Text(
                                          effect.name ?? '',
                                          style: AppTextStyles.body4
                                              .copyWith(color: Colors.white),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        );
                      }
                      return const Center(child: CircularProgressIndicator());
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}