import 'package:flutter/material.dart';
import 'package:initial_folder/base_service.dart';
import 'package:initial_folder/helper/validator.dart';
import 'package:initial_folder/providers/others_course_provider.dart';
import 'package:initial_folder/screens/detail_course/detail_course_screen.dart';
import 'package:initial_folder/screens/home/components/body_comp/lihat_semua_kursus_page.dart';
import 'package:initial_folder/theme.dart';
import 'package:initial_folder/widgets/custom_navigator.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';
import 'product_card/product_card.dart';
import '../../../../size_config.dart';
import 'section_title.dart';

class OthersCourse extends StatelessWidget {
  final bool? showTitle;
  const OthersCourse({Key? key, this.showTitle}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
            padding: EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(16)),
            child: (showTitle == null)
                ? SectionTitle(
                    title: "Kursus Lainnya",
                    press: () {
                      Navigator.push(
                        context,
                        CustomNavigator(
                          child: LihatSemuaKursus(),
                        ),
                      );
                    },
                  )
                : SizedBox()),
        SizedBox(height: getProportionateScreenHeight(30)),
        Consumer<OthersCourseProvider>(builder: (context, state, _) {
          if (state.state == ResultState.Loading) {
            return Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 105,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 85,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 120,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                        baseColor: Colors.white,
                        highlightColor: Colors.grey,
                        child: Container(
                          height: 15,
                          width: 85,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 105,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 85,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 120,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                        baseColor: Colors.white,
                        highlightColor: Colors.grey,
                        child: Container(
                          height: 15,
                          width: 85,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            );
          } else if (state.state == ResultState.HasData) {
            // state.result.shuffle();
            return GridView.builder(
              // controller: _controller,

              padding: EdgeInsets.only(
                right: getProportionateScreenWidth(23),
                left: getProportionateScreenWidth(8),
              ),
              physics: ScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 2.6 / 4,
                crossAxisSpacing: 15,
                mainAxisSpacing: 10,
              ),
              itemCount: state.result.length,
              itemBuilder: (context, index) {
                var othersCourse = state.result[index];
                int price =
                    int.tryParse(othersCourse.price.replaceAll('.', '')) ?? 0;
                int discountPrice = int.tryParse(
                        othersCourse.discountPrice.replaceAll('.', '')) ??
                    0;

                int calculatedPrice = (othersCourse.discountPrice != '0')
                    ? price - discountPrice
                    : price;

                String displayedPrice = (calculatedPrice == 0)
                    ? othersCourse.price
                    : calculatedPrice.toString();
                // var finalRating = double.parse(
                //     (othersCourse.specificRating![0] / 20).toStringAsFixed(2));
                return Padding(
                  padding:
                      EdgeInsets.only(bottom: getProportionateScreenHeight(8)),
                  child: Container(
                    margin: EdgeInsets.only(
                        bottom: getProportionateScreenHeight(12)),
                    child: ProductCard(
                      totalDiscount: othersCourse.totalDiscount ?? 0,
                      students: othersCourse.students ?? '0',
                      id: othersCourse.idCourse,
                      thumbnail: othersCourse.thumbnail ??
                          '$baseUrl/uploads/courses_thumbnail/course_thumbnail_default_57.jpg',
                      title: othersCourse.title,
                      instructorName: othersCourse.instructorName,
                      specificRating: (othersCourse.rating.isNotEmpty &&
                              othersCourse.rating[0]?.avgRating != null)
                          ? othersCourse.rating[0]!.avgRating.toString()
                          : '0',
                      rating: (othersCourse.rating.isNotEmpty &&
                              othersCourse.rating[0]?.avgRating != null)
                          ? othersCourse.rating[0]!.avgRating.toString()
                          : '5.0',
                      numberOfRatings: (othersCourse.rating.isNotEmpty &&
                              othersCourse.rating[0]?.totalReview != null)
                          ? othersCourse.rating[0]!.totalReview!
                          : '0',
                      isTopCourse: othersCourse.topCourse ?? '',
                      price: (othersCourse.price == '0')
                          ? 'Gratis'
                          : (othersCourse.promoPrice != '0')
                              ? numberFormat(othersCourse.promoPrice)
                              : numberFormat(displayedPrice),
                      realPrice: (othersCourse.price == '0')
                          ? ''
                          : numberFormat(othersCourse.price),
                      press: () {
                        Navigator.of(context, rootNavigator: true).push(
                          CustomNavigator(
                            child: DetailCourseScreen(
                              idcourse: othersCourse.idCourse,
                              isPromo:
                                  othersCourse.promoPrice != "0" ? true : null,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                );
              },
            );
          } else if (state.state == ResultState.NoData) {
            return Center(child: Text(state.message));
          } else if (state.state == ResultState.Error) {
            return Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 105,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 85,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 120,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                        baseColor: Colors.white,
                        highlightColor: Colors.grey,
                        child: Container(
                          height: 15,
                          width: 85,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 105,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 85,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 190,
                            color: Colors.white,
                          )),
                      SizedBox(height: 10),
                      Shimmer.fromColors(
                          baseColor: Colors.white,
                          highlightColor: Colors.grey,
                          child: Container(
                            height: 15,
                            width: 120,
                            color: Colors.white,
                          )),
                      SizedBox(height: 8),
                      Shimmer.fromColors(
                        baseColor: Colors.white,
                        highlightColor: Colors.grey,
                        child: Container(
                          height: 15,
                          width: 85,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            );
          } else {
            return Center(child: Text(''));
          }
        })
      ],
    );
  }
}

// courseProvider.course
//               .map(
//                 (product) => ProductCard(
//                   product: product,
//                 ),
//               )
//               .toList(),
