import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/assets.dart';
import 'package:didvan/views/ai/ai_state.dart';
import 'package:didvan/views/ai/tools_state.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
import 'package:didvan/views/widgets/state_handlers/empty_state.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

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

  @override
  State<ToolsScreen> createState() => _ToolsScreenState();
}

class _ToolsScreenState extends State<ToolsScreen> {
  @override
  void initState() {
    super.initState();

    context.read<ToolsState>().getTools();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      physics: context.watch<ToolsState>().loading
          ? const NeverScrollableScrollPhysics()
          : const BouncingScrollPhysics(),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 46, bottom: 24),
            child: DidvanText(
              'انتخاب بات‌ها',
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Theme.of(context).colorScheme.checkFav,
            ),
          ),
          Consumer<ToolsState>(
            builder: (BuildContext context, ToolsState state, Widget? child) {
              final tools = state.tools;
              if (tools != null && tools.isEmpty) {
                return EmptyState(
                  asset: Assets.emptyResult,
                  title: 'لیست خالی است',
                );
              }
              if (state.loading) {
                return toolsPlaceHolder();
              }

              return ListView.builder(
                itemCount: tools!.length,
                shrinkWrap: true,
                padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 24)
                    .copyWith(bottom: 46),
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  final tool = tools[index];
                  return InkWell(
                    onTap: () =>
                        context.read<AiState>().goToToolBox(tool: tool),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: DesignConfig.lowBorderRadius,
                        color: Theme.of(context).colorScheme.surface,
                        border: Border.all(
                          color: Theme.of(context).colorScheme.border,
                        ),
                      ),
                      padding: const EdgeInsets.all(24),
                      margin: const EdgeInsets.symmetric(vertical: 8),
                      child: Row(
                        children: [
                          SvgPicture.network(
                            tool.image!,
                            width: 75,
                            height: 75,
                          ),
                          const SizedBox(
                            width: 8,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    DidvanText(
                                      tool.name!,
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                    ),
                                    Container(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 8, vertical: 2),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(4),
                                          color: Theme.of(context)
                                              .colorScheme
                                              .primary),
                                      child: DidvanText(
                                        '${tool.bots!.length} مدل',
                                        color: Colors.white,
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    )
                                  ],
                                ),
                                DidvanText(
                                  '${tool.bots!.map(
                                    (e) => e.name!,
                                  )}'
                                      .replaceAll('(', '')
                                      .replaceAll(')', ''),
                                  fontSize: 12,
                                  color: Theme.of(context).colorScheme.primary,
                                ),
                                DidvanText(tool.description!,
                                    fontSize: 12,
                                    color:
                                        Theme.of(context).colorScheme.caption)
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  );
                },
              );
            },
          )
        ],
      ),
    );
  }

  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,
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      },
    );
  }
}