import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/constants/assets.dart';
import 'package:didvan/models/ai/ai_chat_args.dart';
import 'package:didvan/routes/routes.dart';
import 'package:didvan/utils/action_sheet.dart';
import 'package:didvan/views/ai/ai_state.dart';
import 'package:didvan/views/ai/history_ai_chat_state.dart';
import 'package:didvan/views/ai/tool_screen.dart';
import 'package:didvan/views/ai/widgets/message_bar_btn.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:didvan/views/widgets/state_handlers/empty_connection.dart';
import 'package:didvan/views/widgets/state_handlers/empty_state.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Ai extends StatefulWidget {
  const Ai({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _AiState createState() => _AiState();
}

class _AiState extends State<Ai> {
  @override
  void initState() {
    super.initState();
    context.read<AiState>().getTools();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Consumer<AiState>(
          builder: (BuildContext context, state, Widget? child) {
            switch (state.page) {
              case 1:
                return const ToolScreen();
              case 0:
              default:
                return Consumer<HistoryAiChatState>(
                  builder: (context, state, child) {
                    if (state.bots.isEmpty) {
                      return Center(
                        child: Image.asset(
                          Assets.loadingAnimation,
                          width: 60,
                          height: 60,
                        ),
                      );
                    }
                    final bot = state.bot!;
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Expanded(
                          child: SingleChildScrollView(
                            child: Padding(
                              padding:
                                  const EdgeInsets.only(bottom: 24, top: 70),
                              child: Column(
                                children: [
                                  Consumer<AiState>(
                                    builder: (BuildContext context,
                                        AiState state, Widget? child) {
                                      final tools = state.tools;
                                      if (tools != null && tools.isEmpty) {
                                        return EmptyState(
                                          asset: Assets.emptyResult,
                                          title: 'لیست خالی است',
                                        );
                                      }
                                      if (state.loading) {
                                        return toolsPlaceHolder();
                                      }
                                      if (tools == null) {
                                        return Padding(
                                          padding: EdgeInsets.only(
                                              top: MediaQuery.sizeOf(context)
                                                      .height *
                                                  0.1),
                                          child: Center(
                                            child: EmptyConnection(
                                              onRetry: () {
                                                context
                                                    .read<AiState>()
                                                    .getTools();
                                              },
                                            ),
                                          ),
                                        );
                                      }

                                      return const SizedBox();
                                    },
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              InkWell(
                                onTap: () {
                                  final historyState =
                                      context.read<HistoryAiChatState>();
                                  if (historyState.bots.isEmpty) {
                                    historyState.getBots();
                                  }
                                  ActionSheetUtils(context)
                                      .botsDialogSelect(context: context);
                                },
                                borderRadius: BorderRadius.circular(12),
                                child: const SizedBox(),
                                // Padding(
                                //   padding: const EdgeInsets.symmetric(
                                //       vertical: 8.0, horizontal: 12.0),
                                //   child: Row(
                                //     mainAxisSize: MainAxisSize.min,
                                //     crossAxisAlignment:
                                //         CrossAxisAlignment.center,
                                //     mainAxisAlignment: MainAxisAlignment.start,
                                //     children: [
                                //       Icon(DidvanIcons.angle_down_light,
                                //           size: 16,
                                //           color: Theme.of(context)
                                //               .colorScheme
                                //               .title),
                                //       const SizedBox(
                                //         width: 8,
                                //       ),
                                //       DidvanText(
                                //         bot.name.toString(),
                                //         color: Theme.of(context)
                                //             .colorScheme
                                //             .title,
                                //         style: const TextStyle(
                                //             fontWeight: FontWeight.bold),
                                //       ),
                                //       const SizedBox(
                                //         width: 12,
                                //       ),
                                //       SkeletonImage(
                                //         width: 28,
                                //         height: 28,
                                //         imageUrl: bot.image.toString(),
                                //         borderRadius:
                                //             BorderRadius.circular(360),
                                //       ),
                                //     ],
                                //   ),
                                // ),
                              ),
                              InkWell(
                                  onTap: () => Navigator.of(context)
                                      .pushNamed(Routes.aiChat,
                                          arguments: AiChatArgs(
                                            bot: bot,
                                          )),
                                  child: Column(
                                    children: [
                                      Row(
                                        children: [
                                          Expanded(
                                            child: Container(
                                              decoration: BoxDecoration(
                                                  color: Theme.of(context)
                                                      .colorScheme
                                                      .surface,
                                                  border: Border.all(
                                                      color: const Color.fromARGB(255, 0, 126, 167),width: 1.5),
                                                  borderRadius: BorderRadius.circular(50)),
                                              child: Row(
                                                children: [
                                                  Expanded(
                                                      child: Padding(
                                                          padding:
                                                              const EdgeInsets
                                                                  .symmetric(
                                                            horizontal: 8.0,
                                                          ),
                                                          child: Form(
                                                              child: Row(
                                                            children: [
                                                              const MessageBarBtn(
                                                                  enable: true,
                                                                  icon: DidvanIcons
                                                                      .mic_regular),
                                                              const SizedBox(
                                                                width: 8,
                                                              ),
                                                              Expanded(
                                                                child:
                                                                    TextFormField(
                                                                  textInputAction:
                                                                      TextInputAction
                                                                          .newline,
                                                                  style: Theme.of(
                                                                          context)
                                                                      .textTheme
                                                                      .bodyMedium,
                                                                  minLines: 1,
                                                                  enabled:
                                                                      false,
                                                                  decoration:
                                                                      InputDecoration(
                                                                    border:
                                                                        InputBorder
                                                                            .none,
                                                                    hintText:
                                                                        'بنویسید یا پیام صوتی بگذارید...',
                                                                    hintStyle: Theme.of(
                                                                            context)
                                                                        .textTheme
                                                                        .bodySmall!
                                                                        .copyWith(
                                                                            color:
                                                                                Theme.of(context).colorScheme.disabledText),
                                                                  ),
                                                                ),
                                                              ),
                                                              const SizedBox(
                                                                width: 8,
                                                              ),
                                                              MessageBarBtn(
                                                                  click: () {
                                                                    Navigator.of(context).pushNamed(
                                                                        Routes
                                                                            .aiChat,
                                                                        arguments: AiChatArgs(
                                                                            bot:
                                                                                bot,
                                                                            attach:
                                                                                true));
                                                                  },
                                                                  enable: false,
                                                                  icon: Icons
                                                                      .add),
                                                            ],
                                                          ))))
                                                ],
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                      const Padding(
                                        padding:
                                            EdgeInsets.fromLTRB(8, 8, 8, 4),
                                        child: FittedBox(
                                          child: DidvanText(
                                            'مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید.',style: TextStyle(fontWeight: FontWeight.w600),
                                          ),
                                        ),
                                      )
                                    ],
                                  )),
                            ],
                          ),
                        ),
                      ],
                    );
                  },
                );
            }
          },
        ),
        Consumer<HistoryAiChatState>(builder: (context, state, child) {
          if (state.bots.isEmpty) return const SizedBox();
          return Positioned(
            top: 32,
            right: 0,
            child: InkWell(
                onTap: () => Scaffold.of(context).openDrawer(),
                child: Container(
                  width: 46,
                  height: 46,
                  decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme.surface,
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(12),
                          bottomLeft: Radius.circular(12)),
                      boxShadow: DesignConfig.defaultShadow),
                  child: Icon(
                    DidvanIcons.angle_left_light,
                    color: Theme.of(context).colorScheme.title,
                  ),
                )),
          );
        })
      ],
    );
  }

  ListView toolsPlaceHolder() {
    return ListView.builder(
      itemCount: 10,
      shrinkWrap: true,
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 24),
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: DesignConfig.lowBorderRadius,
            border: Border.all(
              color: const Color(0xffB8B8B8),
            ),
          ),
          padding: const EdgeInsets.all(24),
          margin: const EdgeInsets.symmetric(vertical: 8),
          child: Row(
            children: [
              ShimmerPlaceholder(
                width: 75,
                height: 75,
                borderRadius: BorderRadius.circular(360),
              ),
              const SizedBox(
                width: 8,
              ),
              const Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        ShimmerPlaceholder(
                          width: 120,
                          height: 24,
                          borderRadius: DesignConfig.mediumBorderRadius,
                        ),
                        ShimmerPlaceholder(
                          width: 60,
                          height: 24,
                          borderRadius: DesignConfig.mediumBorderRadius,
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    ShimmerPlaceholder(
                      width: 120,
                      height: 24,
                      borderRadius: DesignConfig.mediumBorderRadius,
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    ShimmerPlaceholder(
                      width: 240,
                      height: 46,
                      borderRadius: DesignConfig.mediumBorderRadius,
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      },
    );
  }
}