// ignore_for_file: deprecated_member_use

import 'package:before_after/before_after.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:go_router/go_router.dart';
import 'package:hoshan/core/gen/assets.gen.dart';
import 'package:hoshan/core/routes/route_generator.dart';
import 'package:hoshan/core/services/api/dio_service.dart';
import 'package:hoshan/data/model/chat_args.dart';
import 'package:hoshan/ui/screens/gmedia/cubit/single_media_cubit.dart';
import 'package:hoshan/ui/theme/colors.dart';
import 'package:hoshan/ui/theme/cubit/theme_mode_cubit.dart';
import 'package:hoshan/ui/theme/responsive.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:hoshan/ui/widgets/components/snackbar/snackbar_manager.dart';

class GeneratePhotoPage extends StatefulWidget {
  const GeneratePhotoPage({super.key});

  @override
  State<GeneratePhotoPage> createState() => _GeneratePhotoPageState();
}

class _GeneratePhotoPageState extends State<GeneratePhotoPage>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<SingleMediaCubit, SingleMediaState>(
      listener: (context, state) {
        if (state is SingleMediaFail) {
          context.pop();
          SnackBarManager(context).show(
              message:
                  'خطا در برقراری ارتباط با سرور لطفا لحظاتی دیگر امتحان کنید',
              status: SnackBarStatus.error);
        }
      },
      builder: (context, state) {
        if (state is SingleMediaFail) {
          return const SizedBox.shrink();
        }
        if (state is SingleMediaSuccess) {
          final TabController tabController = TabController(
              length: state.medias.categories?.length ?? 0, vsync: this);

          return DefaultTabController(
            length: state.medias.categories?.length ?? 0,
            child: Scaffold(
              body: Responsive(context).maxWidthInDesktop(
                child: (contxet, mw) => Scaffold(
                  appBar: AppBar(
                    toolbarHeight: 0,
                    backgroundColor: context.read<ThemeModeCubit>().isDark()
                        ? null
                        : AppColors.primaryColor[50],
                    bottom: TabBar(
                      controller: tabController,
                      dividerColor: Colors.transparent,
                      tabs: List.generate(
                        state.medias.categories?.length ?? 0,
                        (index) {
                          return Tab(
                            height: 80,
                            child: AnimatedBuilder(
                                animation: tabController,
                                builder: (context, _) {
                                  return Column(
                                    children: [
                                      if (state
                                              .medias.categories?[index].icon !=
                                          null)
                                        Expanded(
                                          child: SvgPicture.network(
                                            DioService.baseURL +
                                                state.medias.categories![index]
                                                    .icon!,
                                            color: tabController.index == index
                                                ? Theme.of(context)
                                                    .colorScheme
                                                    .primary
                                                : AppColors.gray[context
                                                        .read<ThemeModeCubit>()
                                                        .isDark()
                                                    ? 400
                                                    : 800],
                                          ),
                                        ),
                                      Text(
                                        state.medias.categories?[index].name ??
                                            '',
                                        style: AppTextStyles.body4.copyWith(
                                            fontWeight:
                                                tabController.index == index
                                                    ? FontWeight.bold
                                                    : FontWeight.normal,
                                            color: tabController.index == index
                                                ? Theme.of(context)
                                                    .colorScheme
                                                    .primary
                                                : AppColors.gray[context
                                                        .read<ThemeModeCubit>()
                                                        .isDark()
                                                    ? 400
                                                    : 800]),
                                      ),
                                      const SizedBox(
                                        height: 8,
                                      ),
                                    ],
                                  );
                                }),
                          );
                        },
                      ),
                    ),
                  ),
                  body: TabBarView(
                    controller: tabController,
                    physics: const NeverScrollableScrollPhysics(),
                    children: List.generate(
                      state.medias.categories!.length,
                      (index) {
                        switch (index) {
                          case 1:
                            final category = state.medias.categories![index];
                            return MasonryGridView.builder(
                              itemCount: category.bots?.length,
                              physics: const BouncingScrollPhysics(),
                              padding: const EdgeInsets.symmetric(
                                  vertical: 16, horizontal: 16),
                              gridDelegate:
                                  const SliverSimpleGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 2),
                              itemBuilder: (context, index) {
                                final bot = category.bots?[index];
                                ValueNotifier<double> changeAB =
                                    ValueNotifier(0.5);

                                return Padding(
                                  // color: Colors.amberAccent,
                                  padding: const EdgeInsets.all(8),
                                  child: Column(
                                    children: [
                                      Stack(
                                        children: [
                                          AspectRatio(
                                            aspectRatio: 3 / 4,
                                            child: SizedBox(
                                              height: MediaQuery.sizeOf(context)
                                                      .height *
                                                  0.3,
                                              child: Container(
                                                decoration: BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            16),
                                                    color: Theme.of(context)
                                                        .colorScheme
                                                        .surface),
                                                child: ValueListenableBuilder(
                                                    valueListenable: changeAB,
                                                    builder: (context, val, _) {
                                                      return BeforeAfter(
                                                        value: val,
                                                        onValueChanged:
                                                            (value) {
                                                          changeAB.value =
                                                              value;
                                                        },
                                                        trackWidth: 3,
                                                        thumbWidth: 18,
                                                        after: ImageNetwork(
                                                          radius: 16,
                                                          url:
                                                              bot?.image2 ?? '',
                                                          // url: a,
                                                          fit: BoxFit.cover,
                                                          width:
                                                              double.infinity,
                                                          height:
                                                              double.infinity,
                                                        ),
                                                        before: ImageNetwork(
                                                          radius: 16,
                                                          url: bot?.image ?? '',
                                                          // url: b,

                                                          fit: BoxFit.cover,
                                                          width:
                                                              double.infinity,
                                                          height:
                                                              double.infinity,
                                                        ),
                                                      );
                                                    }),
                                              ),
                                            ),
                                          ),
                                          Positioned(
                                            right: 8,
                                            bottom: 12,
                                            child: Container(
                                              padding:
                                                  const EdgeInsets.symmetric(
                                                      vertical: 4,
                                                      horizontal: 8),
                                              decoration: BoxDecoration(
                                                  color: Theme.of(context)
                                                      .colorScheme
                                                      .secondary
                                                      .withAlpha(180),
                                                  borderRadius:
                                                      BorderRadius.circular(8)),
                                              child: Row(
                                                children: [
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            top: 2.0),
                                                    child: Text(
                                                      bot!.cost == 0 ||
                                                              bot.cost == null
                                                          ? 'رایگان'
                                                          : '${bot.cost}',
                                                      style: AppTextStyles.body6
                                                          .copyWith(
                                                              color:
                                                                  Colors.white),
                                                    ),
                                                  ),
                                                  Assets.icon.outline.coin.svg(
                                                      color: Colors.white,
                                                      width: 16,
                                                      height: 16),
                                                ],
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                      const SizedBox(
                                        height: 4,
                                      ),
                                      LoadingButton(
                                          onPressed: () {
                                            context.go(Routes.photoToPhoto,
                                                extra: ChatArgs(
                                                  bot: bot,
                                                ));
                                          },
                                          width: double.infinity,
                                          child: Text(
                                            bot.name ?? '',
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: AppTextStyles.body4
                                                .copyWith(color: Colors.white),
                                          ))
                                    ],
                                  ),
                                );
                              },
                            );
                          case 0:
                            final category = state.medias.categories![index];
                            return MasonryGridView.builder(
                              itemCount: category.bots?.length,
                              physics: const BouncingScrollPhysics(),
                              padding: const EdgeInsets.symmetric(
                                  vertical: 16, horizontal: 16),
                              gridDelegate:
                                  const SliverSimpleGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 2),
                              itemBuilder: (context, index) {
                                final bot = category.bots?[index];
                                return Padding(
                                  // color: Colors.amberAccent,
                                  padding: const EdgeInsets.all(8),

                                  child: InkWell(
                                    onTap: () {
                                      context.go(Routes.photoToPhoto,
                                          extra: ChatArgs(bot: bot!));
                                    },
                                    child: Container(
                                      constraints: BoxConstraints(
                                          maxHeight: MediaQuery.sizeOf(context)
                                                  .height *
                                              0.3),
                                      decoration: BoxDecoration(
                                          color: Theme.of(context)
                                              .colorScheme
                                              .surface,
                                          borderRadius:
                                              BorderRadius.circular(16)),
                                      child: Stack(
                                        children: [
                                          ImageNetwork(
                                            radius: 16,
                                            url: bot?.image ?? '',
                                            fit: BoxFit.cover,
                                          ),
                                          Positioned.fill(
                                              child: Container(
                                            padding: const EdgeInsets.all(8),
                                            decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(16),
                                                gradient: LinearGradient(
                                                    begin: Alignment.topCenter,
                                                    end: Alignment.bottomCenter,
                                                    colors: [
                                                      Theme.of(context)
                                                          .colorScheme
                                                          .surface
                                                          .withAlpha(40),
                                                      AppColors
                                                          .primaryColor[600]
                                                          .withAlpha(180)
                                                    ])),
                                            child: Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.end,
                                              mainAxisAlignment:
                                                  MainAxisAlignment.end,
                                              children: [
                                                Text(
                                                  bot?.name ?? '',
                                                  style: AppTextStyles.body4
                                                      .copyWith(
                                                          color: Colors.white,
                                                          fontWeight:
                                                              FontWeight.bold),
                                                  textDirection:
                                                      TextDirection.rtl,
                                                  maxLines: 2,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                ),
                                                Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.end,
                                                  children: [
                                                    Padding(
                                                      padding:
                                                          const EdgeInsets.only(
                                                              top: 4.0),
                                                      child: Text(
                                                        bot?.cost?.toString() ??
                                                            '',
                                                        style: AppTextStyles
                                                            .body4
                                                            .copyWith(
                                                                color: Colors
                                                                    .white),
                                                      ),
                                                    ),
                                                    const SizedBox(
                                                      width: 4,
                                                    ),
                                                    Assets.icon.outline.coin
                                                        .svg(
                                                            color: Colors.white,
                                                            width: 18,
                                                            height: 18)
                                                  ],
                                                )
                                              ],
                                            ),
                                          ))
                                        ],
                                      ),
                                    ),
                                  ),
                                );
                              },
                            );
                          default:
                            return const SizedBox.shrink();
                        }
                      },
                    ),
                  ),
                ),
              ),
            ),
          );
        }
        return const Scaffold(
          body: Center(
            child: CircularProgressIndicator(),
          ),
        );
      },
    );
  }
}
