import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/ai/ai_chat_args.dart';
import 'package:didvan/models/ai/tools_model.dart';
import 'package:didvan/routes/routes.dart';
import 'package:didvan/views/ai/ai_state.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

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

  @override
  State<ToolScreen> createState() => _ToolScreenState();
}

class _ToolScreenState extends State<ToolScreen> {
  late Tools tool = context.read<AiState>().tool!;

  get itemBuilder => null;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      physics: const BouncingScrollPhysics(),
      child: Column(
        children: [
          const SizedBox(height: 32),
          SvgPicture.network(
            tool.image!,
            width: 64,
            height: 64,
          ),
          const SizedBox(
            height: 4,
          ),
          DidvanText(
            tool.name!,
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Theme.of(context).colorScheme.checkFav,
          ),
          const SizedBox(height: 8),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 32),
            child: DidvanText(
              tool.guide!,
              fontSize: 12,
              color: Theme.of(context).colorScheme.caption,
              textAlign: TextAlign.justify,
            ),
          ),
          const SizedBox(height: 24),
          GridView.builder(
            shrinkWrap: true,
            itemCount: tool.bots!.length,
            physics: const NeverScrollableScrollPhysics(),
            padding: const EdgeInsets.symmetric(horizontal: 32),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1 / 1,
                crossAxisSpacing: 18,
                mainAxisSpacing: 18),
            itemBuilder: (context, index) {
              final bot = tool.bots![index];
              return InkWell(
                onTap: () => Navigator.of(context).pushNamed(Routes.aiChat,
                    arguments: AiChatArgs(bot: bot, isTool: tool.bots)),
                child: Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                      borderRadius: DesignConfig.lowBorderRadius,
                      border: Border.all(color: const Color(0xffbbbbbb))),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SkeletonImage(
                        imageUrl: bot.image!,
                        width: 72,
                        height: 72,
                        borderRadius: BorderRadius.circular(360),
                      ),
                      const SizedBox(
                        height: 4,
                      ),
                      DidvanText(
                        bot.name!,
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: Theme.of(context).colorScheme.text,
                      ),
                      if (bot.short != null)
                        Column(
                          children: [
                            const SizedBox(
                              height: 4,
                            ),
                            DidvanText(
                              bot.short!,
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                              color: const Color(0xffA8A6AC),
                              // maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        )
                    ],
                  ),
                ),
              );
            },
          )
        ],
      ),
    );
  }
}