import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:initial_folder/providers/categories_provider.dart'
    as categoriesProv;
import 'package:initial_folder/providers/others_course_provider.dart';
import 'package:initial_folder/screens/home/components/body_comp/course_by_category.dart';
import 'package:initial_folder/theme.dart';
import 'package:initial_folder/widgets/custom_navigator.dart';
import 'package:provider/provider.dart';
import '../../../../size_config.dart';

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

  @override
  State<LihatSemuaKategori> createState() => _LihatSemuaKategoriState();
}

class _LihatSemuaKategoriState extends State<LihatSemuaKategori> {
  @override
  Widget build(BuildContext context) {
    categoriesProv.CategoriesProvider categoriesProvider =
        Provider.of<categoriesProv.CategoriesProvider>(context);

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          scrolledUnderElevation: 0.0,
          backgroundColor: Theme.of(context).colorScheme.background,
          title: Text(
            "Kategori",
            style: thirdTextStyle.copyWith(
                fontWeight: bold, fontSize: getProportionateScreenWidth(16)),
          ),
        ),
        body: Padding(
          padding: EdgeInsets.only(left: getProportionateScreenWidth(15)),
          child: Stack(
            children: [
              Padding(
                padding: EdgeInsets.only(
                  left: getProportionateScreenWidth(20),
                  right: getProportionateScreenWidth(14),
                  top: getProportionateScreenHeight(10),
                ),
                child: categoriesProvider.state == ResultState.Loading
                    ? Center(child: CircularProgressIndicator())
                    : GridView.count(
                        crossAxisCount: 2,
                        childAspectRatio: 4.3 / 2,
                        mainAxisSpacing: 13,
                        crossAxisSpacing: 30,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        children: List.generate(
                            categoriesProvider.result.length, (index) {
                          return GestureDetector(
                            onTap: () {
                              Navigator.of(context).push(
                                CustomNavigator(
                                  child: CourseByCategory(
                                    name: categoriesProvider
                                            .result[index].nameCategory! ??
                                        '',
                                    categoryId:
                                        categoriesProvider.result[index].id!,
                                    subId: "",
                                    homeCategories: true,
                                  ),
                                ),
                              );
                            },
                            child: SizedBox(
                              width: getProportionateScreenWidth(160),
                              child: Container(
                                padding: EdgeInsets.symmetric(
                                  vertical: getProportionateScreenHeight(5),
                                  horizontal: getProportionateScreenWidth(10),
                                ),
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Theme.of(context).brightness ==
                                            Brightness.dark
                                        ? baruTextutih
                                        : Colors.grey,
                                  ),
                                  borderRadius: BorderRadius.circular(15),
                                ),
                                child: Padding(
                                  padding: EdgeInsets.only(
                                      left: getProportionateScreenWidth(18)),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        categoriesProvider
                                            .result[index].nameCategory!.replaceAll('&amp;', '&'),
                                        style: thirdTextStyle.copyWith(
                                          fontSize:
                                              getProportionateScreenWidth(10),
                                          fontWeight: bold,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          );
                        }),
                      ),
              ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.topLeft,
                    widthFactor: 0.12,
                    heightFactor: 0.2,
                    child: Padding(
                      padding:
                          EdgeInsets.only(top: getProportionateScreenHeight(9)),
                      child: SvgPicture.asset(
                        "assets/icons/category1.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.topLeft,
                    widthFactor: 0.12,
                    heightFactor: 0.59,
                    child: Padding(
                      padding:
                          EdgeInsets.only(top: getProportionateScreenHeight(9)),
                      child: SvgPicture.asset(
                        "assets/icons/category3.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.topRight,
                    widthFactor: 0.51,
                    heightFactor: 0.2,
                    child: Padding(
                      padding: EdgeInsets.only(
                        right: getProportionateScreenWidth(133),
                        top: getProportionateScreenHeight(10),
                      ),
                      child: SvgPicture.asset(
                        "assets/icons/category2.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.topRight,
                    widthFactor: 0.51,
                    heightFactor: 0.6,
                    child: Padding(
                      padding: EdgeInsets.only(
                        right: getProportionateScreenWidth(133),
                        top: getProportionateScreenHeight(10),
                      ),
                      child: SvgPicture.asset(
                        "assets/icons/category4.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.centerLeft,
                    widthFactor: 0.12,
                    heightFactor: 0.7,
                    child: Padding(
                      padding:
                          EdgeInsets.only(top: getProportionateScreenHeight(9)),
                      child: SvgPicture.asset(
                        "assets/icons/category5.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.bottomLeft,
                    widthFactor: 0.12,
                    heightFactor: 0.57,
                    child: SvgPicture.asset(
                      "assets/icons/category7.svg",
                      width: getProportionateScreenWidth(35),
                      height: getProportionateScreenHeight(35),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.centerRight,
                    widthFactor: 0.51,
                    heightFactor: 0.75,
                    child: Padding(
                      padding: EdgeInsets.only(
                        right: getProportionateScreenWidth(133),
                        top: getProportionateScreenHeight(10),
                      ),
                      child: SvgPicture.asset(
                        "assets/icons/category6.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.bottomRight,
                    widthFactor: 0.51,
                    heightFactor: 0.57,
                    child: Padding(
                      padding: EdgeInsets.only(
                          right: getProportionateScreenWidth(133)),
                      child: SvgPicture.asset(
                        "assets/icons/category8.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.bottomLeft,
                    widthFactor: 0.12,
                    heightFactor: 0.17,
                    child: SvgPicture.asset(
                      "assets/icons/category9.svg",
                      width: getProportionateScreenWidth(35),
                      height: getProportionateScreenHeight(35),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
