import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:initial_folder/base_service.dart';
import 'package:initial_folder/helper/validator.dart';
import 'package:initial_folder/providers/top_course_provider.dart';
import 'package:initial_folder/screens/detail_course/detail_course_screen.dart';
import 'package:initial_folder/screens/home/components/body_comp/product_card/product_card.dart';
import 'package:initial_folder/widgets/custom_navigator.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';

import '../../../../size_config.dart';
import '../../../../theme.dart';

class PopulerCourse extends StatelessWidget {
  const PopulerCourse({Key? key, this.text}) : super(key: key);
  final String? text;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding:
              EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(16)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                text.toString(),
                textAlign: TextAlign.left,
                style: thirdTextStyle.copyWith(
                  letterSpacing: 1,
                  fontSize: getProportionateScreenWidth(15),
                  fontWeight: semiBold,
                ),
              ),
            ],
          ),
        ),
        SizedBox(height: getProportionateScreenHeight(10)),
        Consumer<TopCourseProvider>(
          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) {
              return Container(
                alignment: Alignment.centerLeft,
                margin: EdgeInsets.only(left: getProportionateScreenWidth(10)),
                height: getProportionateScreenHeight(220),
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  physics: ScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: state.result.length,
                  itemBuilder: (context, index) {
                    var topCourse = state.result[index];
                    // var finalRating = double.parse(
                    //     (topCourse.specificRating![0] / 20).toStringAsFixed(2));
                    int price =
                        int.tryParse(topCourse.price.replaceAll('.', '')) ?? 0;
                    int discountPrice = int.tryParse(
                            topCourse.discountPrice.replaceAll('.', '')) ??
                        0;

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

                    String displayedPrice = (calculatedPrice == 0)
                        ? topCourse.price
                        : calculatedPrice.toString();
                    return Container(
                      margin: EdgeInsets.only(
                        top: getProportionateScreenHeight(10),
                      ),
                      child: Padding(
                        padding: EdgeInsets.only(
                          right: getProportionateScreenWidth(18),
                          bottom: getProportionateScreenWidth(18),
                        ),
                        child: ProductCard(
                          totalDiscount: topCourse.totalDiscount ?? 0,
                          students: topCourse.students ?? '0',
                          pad: 12,
                          id: topCourse.idCourse,
                          thumbnail: topCourse.thumbnail ??
                              '$baseUrl/uploads/courses_thumbnail/course_thumbnail_default_57.jpg',
                          title: topCourse.title,
                          instructorName: topCourse.instructorName,
                          specificRating: (topCourse.rating.isNotEmpty &&
                                  topCourse.rating[0]?.avgRating != null)
                              ? topCourse.rating[0]!.avgRating.toString()
                              : '0',
                          rating: (topCourse.rating.isNotEmpty &&
                                  topCourse.rating[0]?.avgRating != null)
                              ? topCourse.rating[0]!.avgRating.toString()
                              : '5.0',
                          numberOfRatings: (topCourse.rating.isNotEmpty &&
                                  topCourse.rating[0]?.totalReview != null)
                              ? topCourse.rating[0]!.totalReview!
                              : '0',
                          isTopCourse: topCourse.topCourse!,
                          price: (topCourse.price == '0')
                              ? 'Gratis'
                              : (topCourse.promoPrice != '0')
                                  ? numberFormat(topCourse.promoPrice)
                                  : numberFormat(displayedPrice),
                          realPrice: (topCourse.price == '0')
                              ? ''
                              : numberFormat(topCourse.price),
                          press: () {
                            print(topCourse.idCourse);
                            Navigator.of(context, rootNavigator: true).push(
                              CustomNavigator(
                                child: DetailCourseScreen(
                                  idcourse: topCourse.idCourse,
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                    );
                  },
                ),
              );
            } 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(''));
            }
          },
        )
      ],
    );
  }
}