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

class HomeCategories extends StatelessWidget {
  const HomeCategories({super.key});

  @override
  Widget build(BuildContext context) {
    CategoriesProvider categoriesProvider =
        Provider.of<CategoriesProvider>(context);
    return Padding(
      padding: EdgeInsets.only(left: getProportionateScreenWidth(17)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: getProportionateScreenHeight(15)),
          Padding(
            padding: EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(16)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Kategori',
                  textAlign: TextAlign.left,
                  style: thirdTextStyle.copyWith(
                    letterSpacing: 1,
                    fontSize: getProportionateScreenWidth(15),
                    fontWeight: semiBold,
                  ),
                ),
                GestureDetector(
                  onTap: () =>
                      Navigator.pushNamed(context, '/lihatSemuaKategori'),
                  child: Text(
                    'Lihat Semua',
                    textAlign: TextAlign.left,
                    style: thirdTextStyle.copyWith(
                      letterSpacing: 1,
                      fontSize: getProportionateScreenWidth(11),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: getProportionateScreenHeight(18)),
          Stack(
            children: [
              Padding(
                padding: EdgeInsets.only(
                  left: getProportionateScreenWidth(22),
                  right: getProportionateScreenWidth(14),
                ),
                child: categoriesProvider.state == ResultState.Loading
                    ? GridView.count(
                        crossAxisCount: 2,
                        childAspectRatio: 5 / 2,
                        mainAxisSpacing: 13,
                        crossAxisSpacing: 30,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        children: List.generate(4, (index) {
                          return Shimmer.fromColors(
                            baseColor: Colors.grey,
                            highlightColor: Colors.white,
                            child: SizedBox(
                              width: getProportionateScreenWidth(160),
                              child: Container(
                                padding: EdgeInsets.symmetric(
                                  vertical: getProportionateScreenHeight(5),
                                  horizontal: getProportionateScreenWidth(10),
                                ),
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.grey,
                                  ),
                                  borderRadius: BorderRadius.circular(15),
                                ),
                                child: Padding(
                                  padding: EdgeInsets.only(
                                      left: getProportionateScreenWidth(18)),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Container(
                                        color: Colors.white,
                                        height:
                                            getProportionateScreenHeight(10),
                                      ),
                                      SizedBox(
                                          height:
                                              getProportionateScreenHeight(7)),
                                      Container(
                                        color: Colors.white,
                                        height:
                                            getProportionateScreenHeight(10),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          );
                        }),
                      )
                    : GridView.count(
                        crossAxisCount: 2,
                        childAspectRatio: 5 / 2,
                        mainAxisSpacing: 13,
                        crossAxisSpacing: 30,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        children: List.generate(4, (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),
                                          letterSpacing: 1,
                                          fontWeight: bold,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          );
                        }),
                      ),
              ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.topLeft,
                    widthFactor: 0.12,
                    heightFactor: 0.44,
                    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: 1.53,
                    child: SvgPicture.asset(
                      "assets/icons/category3.svg",
                      width: getProportionateScreenWidth(35),
                      height: getProportionateScreenHeight(35),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.topCenter,
                    widthFactor: 0.6,
                    heightFactor: 0.4,
                    child: Padding(
                      padding: EdgeInsets.only(
                        left: getProportionateScreenWidth(37),
                        top: getProportionateScreenHeight(7),
                      ),
                      child: SvgPicture.asset(
                        "assets/icons/category2.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
              if (categoriesProvider.state != ResultState.Loading)
                Positioned.fill(
                  child: FractionallySizedBox(
                    alignment: Alignment.bottomCenter,
                    widthFactor: 0.53,
                    heightFactor: 0.39,
                    child: Padding(
                      padding: EdgeInsets.only(
                        left: getProportionateScreenWidth(37),
                        bottom: getProportionateScreenHeight(7),
                      ),
                      child: SvgPicture.asset(
                        "assets/icons/category4.svg",
                        width: getProportionateScreenWidth(35),
                        height: getProportionateScreenHeight(35),
                      ),
                    ),
                  ),
                ),
            ],
          ),
          SizedBox(height: getProportionateScreenHeight(5)),
        ],
      ),
    );
  }
}
