import 'package:flutter/material.dart';
import 'package:flutter_font_icons/flutter_font_icons.dart';
import 'package:go_router/go_router.dart';
import 'package:tacban/assets/theme/colors.dart';
import 'package:tacban/src/app/home/screens/formulario_screen.dart';
import 'package:tacban/src/app/home/widgets/card_info_detail.dart';
import 'package:tacban/src/shared/widgets/back_button.dart';
import 'package:tacban/src/shared/widgets/buttons/simple_button.dart';
import 'package:tacban/src/shared/widgets/inputs/search_controller.dart';

class CategoriaScreen extends StatefulWidget {
  static String path = '/categoriascreen';
  final String title;
  const CategoriaScreen({super.key, required this.title});

  @override
  State<CategoriaScreen> createState() => _CategoriaScreenState();
}

class _CategoriaScreenState extends State<CategoriaScreen> with TickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  TabController? _tabMenuController;

  @override
  void initState() {
    _tabMenuController = TabController(initialIndex: 0, length: 3, vsync: this);
    _tabMenuController!.addListener(() {
      if (_tabMenuController!.indexIsChanging) {
        setState(() {
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Radius radius = const Radius.circular(30);
    return Scaffold(
      key: _scaffoldKey,
      extendBodyBehindAppBar: true,
      appBar: const PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: SizedBox(), 
      ),
      body: Container(
        decoration: BoxDecoration(
          // color: Theme.of(context).primaryColor,
          image: const DecorationImage(
            image: AssetImage('lib/assets/images/bg_header.png'),
            fit: BoxFit.cover,
          )
        ),
        child: DefaultTabController(
          length: 2,
          child: Column(
            children: [
              const SizedBox(height: 40),
              SafeArea(
                bottom: false,
                child: SizedBox(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
                    child: Row(
                      children: [
                        const BackButtonWidget(),
                        const SizedBox(width: 10),
                        Expanded(
                          child: SizedBox(
                            width: double.infinity,
                            child: Text(
                              widget.title,
                              textAlign: TextAlign.start,
                              style: Theme.of(context).textTheme.bodySmall?.copyWith(
                                fontWeight: FontWeight.bold,
                                color: AppColorLight.primaryColor,
                                fontSize: 20
                              )
                            )
                          )
                        )
                      ]
                    )
                  )
                )
              ),
              ClipRRect(
                borderRadius: BorderRadius.only(
                  topLeft: radius,
                  topRight: radius
                ),
                child: Center(
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    decoration: BoxDecoration(
                      color: Theme.of(context).scaffoldBackgroundColor
                    ),
                    child: Form(
                      key: _formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          const SizedBox(height: 20),
                          Container(
                            height: 70,
                            decoration: BoxDecoration(
                              color: Theme.of(context).scaffoldBackgroundColor,
                              borderRadius: BorderRadius.circular(25.0)
                            ),
                            child:  TabBar(
                              controller: _tabMenuController,
                              indicatorSize: TabBarIndicatorSize.tab,
                              labelStyle:  Theme.of(context).textTheme.bodySmall?.copyWith(
                                fontWeight: FontWeight.bold,
                                color: AppColorLight.primaryColor,
                                fontSize: 17
                              ),
                              indicator: BoxDecoration(
                                color: AppColorLight.secondaryColor,
                                borderRadius:  BorderRadius.circular(20.0)
                              ),
                              labelColor: Colors.white,
                              unselectedLabelColor: AppColorLight.primaryColor,
                              overlayColor: const MaterialStatePropertyAll(Colors.white),
                              tabs: const [
                                Tab(
                                  text: 'Soja',
                                ),
                                Tab(
                                  text: 'Trigo',
                                ),
                                Tab(
                                  text: 'Milho',
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(height: 20),
                          // const SizedBox(height: 20),
                          SearchInput(
                            hintText: 'Pesquisar',
                            showIcon: true,
                            prefixIcon: Feather.search,
                            textInputType: TextInputType.text,
                            textInputAction: TextInputAction.search,
                            onFieldSubmitted: (value) async {
                            }
                          ),
                          const SizedBox(height: 20),
                        ]
                      )
                    )
                  ),
                )
              ),
              Expanded(
                child: TabBarView(
                  controller: _tabMenuController,
                  children: [
                    Container(
                      color: Theme.of(context).scaffoldBackgroundColor,
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: SingleChildScrollView(
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/02.jpeg',
                                    title: 'Apaga foto',
                                    subTitle: 'Alternatera tenella',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                  SizedBox(width: 20),
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/03.jpeg',
                                    title: 'Azevén',
                                    subTitle: 'Lolium Mutiforum',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                ],
                              ),
                              const SizedBox(height: 20),
                              Row(
                                children: [
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/04.jpeg',
                                    title: 'Buva',
                                    subTitle: 'Caonyza bonariensis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                  SizedBox(width: 20),
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/05.jpeg',
                                    title: 'Capim amargoso',
                                    subTitle: 'Digitaria insularis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  )
                                ]
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Container(
                      color: Theme.of(context).scaffoldBackgroundColor,
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: SingleChildScrollView(
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/02.jpeg',
                                    title: 'Apaga foto',
                                    subTitle: 'Alternatera tenella',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                  SizedBox(width: 20),
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/02.jpeg',
                                    title: 'Azevén',
                                    subTitle: 'Lolium Mutiforum',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                ],
                              ),
                              const SizedBox(height: 20),
                              Row(
                                children: [
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/03.jpeg',
                                    title: 'Buva',
                                    subTitle: 'Caonyza bonariensis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                  SizedBox(width: 20),
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/03.jpeg',
                                    title: 'Capim amargoso',
                                    subTitle: 'Digitaria insularis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  )
                                ],
                              ),
                              const SizedBox(height: 20),
                              Row(
                                children: [
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/02.jpeg',
                                    title: 'Capim branqiária',
                                    subTitle: 'Digitaria insularis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                  SizedBox(width: 20),
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/02.jpeg',
                                    title: 'Capim carrapicho',
                                    subTitle: 'Digitaria insularis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Container(
                      color: Theme.of(context).scaffoldBackgroundColor,
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: SingleChildScrollView(
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/02.jpeg',
                                    title: 'Apaga foto',
                                    subTitle: 'Alternatera tenella',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                  SizedBox(width: 20),
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/02.jpeg',
                                    title: 'Azevén',
                                    subTitle: 'Lolium Mutiforum',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                ],
                              ),
                              const SizedBox(height: 20),
                              Row(
                                children: [
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/03.jpeg',
                                    title: 'Buva',
                                    subTitle: 'Caonyza bonariensis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  ),
                                  SizedBox(width: 20),
                                  CardInfoDetailWidget(
                                    svg: 'lib/assets/images/03.jpeg',
                                    title: 'Capim amargoso',
                                    subTitle: 'Digitaria insularis',
                                    onTap: (){
                                      print('dsdsd');
                                    },
                                  )
                                ],
                              ),
                              const SizedBox(height: 20),
                            ],
                          ),
                        ),
                      ),
                    )
                  ]
                )
              ),
              const SizedBox(height: 20),
              SafeArea(
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  child: ButtonWidget(
                    label: 'Não identifiquei o alvo',
                    isloading: false,
                    onTap: (){
                      context.push(FormularioScreen.path);
                    }
                  )
                )
              )
            ]
          )
        )
      )
    );
  }
}