import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:initial_folder/models/my_certificate.dart';
import 'package:initial_folder/providers/certificate_provider.dart';
import 'package:initial_folder/screens/course/sertif.dart';
import 'package:initial_folder/screens/course/sertif_view.dart';
import 'package:initial_folder/size_config.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 'package:initial_folder/screens/certificate/component/just_certificate_count.dart';

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

  @override
  State<CertificateItem> createState() => _CertificateItemState();
}

class _CertificateItemState extends State<CertificateItem> {
  @override
  Widget build(BuildContext context) {
    return Consumer<CertificateProvider>(
      builder: (context, value, child) {
        return certificateCountComponent('assets/icons/gold-medal.png',
            value.allCertificateCount.toString(), 'Jumlah Sertifikat', context);
      },
    );
  }

  Widget certificateCountComponent(
    String icon,
    String count,
    String content,
    BuildContext context,
  ) {
    return ShaderMask(
      shaderCallback: (Rect rect) {
        return LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.black,
            Colors.transparent,
            Colors.transparent,
            Colors.black
          ],
          stops: [0.0, 0.02, 0.98, 1.0],
        ).createShader(rect);
      },
      blendMode: BlendMode.dstOut,
      child: Consumer<CertificateProvider>(
        builder: (context, state, _) {
          if (state.state == ResultState.HasData) {
            return Column(
              children: [
                SizedBox(height: getProportionateScreenHeight(10)),
                Container(
                  padding:
                      EdgeInsets.only(top: getProportionateScreenHeight(10)),
                  height: getProportionateScreenWidth(550),
                  child: ListView.builder(
                    itemCount: state.allCertificate?.length,
                    itemBuilder: (context, index) {
                      return allCertificates(state, index, instructorProfile,
                          buttonOpacity, buttonActivator);
                    },
                  ),
                )
              ],
            );
          } else if (state.state == ResultState.Loading) {
            return Shimmer.fromColors(
              baseColor: Colors.grey,
              highlightColor: Colors.white,
              child: Column(
                children: [
                  SizedBox(height: getProportionateScreenHeight(10)),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Container(
                            width: getProportionateScreenWidth(100),
                            height: getProportionateScreenHeight(20),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                color: Colors.white),
                          ),
                          SizedBox(width: getProportionateScreenHeight(130)),
                          Container(
                            width: getProportionateScreenWidth(50),
                            height: getProportionateScreenHeight(20),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                color: Colors.white),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Container(
                    padding:
                        EdgeInsets.only(top: getProportionateScreenHeight(10)),
                    height: getProportionateScreenWidth(500),
                    child: ListView.builder(
                      itemCount: 5,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: EdgeInsets.only(
                              top: getProportionateScreenHeight(20)),
                          child: Container(
                            height: getProportionateScreenHeight(90),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                color: Colors.white),
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),
            );
          } else if (state.state == ResultState.NoData) {
            return Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    JustCertificateCount(),
                  ],
                ),
                Center(
                  child: Padding(
                    padding:
                        EdgeInsets.only(top: getProportionateScreenHeight(180)),
                    child: Text('Sertifikat Tidak Tersedia'),
                  ),
                )
              ],
            );
          } else if (state.state == ResultState.Error) {
            return Center(
              child: Text('Terjadi Kesalahan'),
            );
          } else {
            return Center(
              child: Text(''),
            );
          }
        },
      ),
    );
  }

  instructorProfile(DataMyCertificateModel certificate) {
    if (certificate.fotoProfile == null) {
      return Image.asset(
        "assets/images/Profile Image.png",
        width: getProportionateScreenWidth(21),
        height: getProportionateScreenHeight(21),
      );
    } else
      return CircleAvatar(
        radius: getProportionateScreenWidth(10),
        backgroundImage: NetworkImage(certificate.fotoProfile!),
      );
  }

  buttonOpacity(int percentage) {
    if (percentage == 100) {
      return primaryColor;
    } else {
      return Color.fromRGBO(237, 169, 35, 0.5);
    }
  }

  buttonActivator(int percentage, BuildContext context,
      DataMyCertificateModel certificate) {
    if (percentage == 100) {
      return () {
        Navigator.push(
          context,
          CustomNavigator(
            child: Sertif(
              idCourse: int.parse(certificate.courseId!),
              totalProgress: certificate.progress,
            ),
          ),
        );
      };
    } else {
      return null;
    }
  }

  buttonActivatorView(int percentage, BuildContext context,
      DataMyCertificateModel certificate) {
    if (percentage == 100) {
      return () {
        Navigator.push(
          context,
          CustomNavigator(
            child: SertifView(
              idCourse: int.parse(certificate.courseId!),
              totalProgress: certificate.progress,
            ),
          ),
        );
      };
    } else {
      return null;
    }
  }

  allCertificates(
      state, index, instructorProfile, buttonOpacity, buttonActivator) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: getProportionateScreenHeight(8)),
      child: Container(
        height: getProportionateScreenHeight(120),
        padding:
            EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(10)),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Theme.of(context).colorScheme.primaryContainer,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              spreadRadius: 0,
              blurRadius: 4,
              offset: Offset(0, 4),
            ),
          ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Image.asset(
              'assets/images/certificate.png',
              width: getProportionateScreenWidth(45),
              height: getProportionateScreenHeight(45),
            ),
            SizedBox(
              width: getProportionateScreenWidth(250),
              child: Padding(
                padding: EdgeInsets.symmetric(
                    vertical: getProportionateScreenHeight(13),
                    horizontal: getProportionateScreenWidth(3)),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      state.allCertificate![index]!.title!,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                      style: TextStyle(
                          fontSize: getProportionateScreenWidth(13),
                          fontWeight: reguler),
                    ),
                    SizedBox(height: getProportionateScreenHeight(10)),
                    Row(
                      children: [
                        instructorProfile(state.allCertificate![index]!),
                        SizedBox(width: getProportionateScreenWidth(5)),
                        Container(
                          width: getProportionateScreenHeight(100),
                          child: Text(
                            state.allCertificate![index]!.instructor!,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                fontSize: getProportionateScreenHeight(11)),
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: getProportionateScreenHeight(3)),
                    Row(
                      children: [
                        Stack(
                          children: [
                            Container(
                              width: (SizeConfig.screenWidth -
                                  getProportionateScreenWidth(270)),
                              height: 10,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: Colors.grey),
                            ),
                            Container(
                              width: (SizeConfig.screenWidth -
                                      getProportionateScreenWidth(270)) *
                                  state.allCertificate![index]!.progress! /
                                  100,
                              height: 10,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: primaryColor),
                            ),
                          ],
                        ),
                        Text(
                          "  ${state.allCertificate![index]!.progress!.toString()}%   ",
                          style: TextStyle(
                              fontSize: getProportionateScreenWidth(10),
                              fontWeight: bold),
                        ),
                        ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            minimumSize: Size(getProportionateScreenWidth(5),
                                getProportionateScreenHeight(5)),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(5),
                            ),
                            backgroundColor: primaryColor,
                            disabledForegroundColor: Colors.grey,
                            disabledBackgroundColor: Colors.grey,
                            padding: EdgeInsets.symmetric(
                                horizontal: getProportionateScreenWidth(6)),
                          ),
                          onPressed: buttonActivatorView(
                              state.allCertificate![index]!.progress!,
                              context,
                              state.allCertificate![index]!),
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.symmetric(
                                    vertical: getProportionateScreenHeight(2)),
                                child: Text(
                                  "Lihat\nSertifikat",
                                  style: TextStyle(
                                      fontSize: getProportionateScreenHeight(5),
                                      color: baruTextutih),
                                ),
                              ),
                              SizedBox(width: getProportionateScreenWidth(5)),
                              SvgPicture.asset(
                                'assets/icons/eye.svg',
                                fit: BoxFit.fitWidth,
                                width: getProportionateScreenWidth(12),
                              )
                            ],
                          ),
                        ),
                        SizedBox(width: getProportionateScreenWidth(7)),
                        ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            minimumSize: Size(getProportionateScreenWidth(5),
                                getProportionateScreenHeight(5)),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(5),
                            ),
                            backgroundColor: primaryColor,
                            disabledForegroundColor: Colors.grey,
                            disabledBackgroundColor: Colors.grey,
                            padding: EdgeInsets.symmetric(
                                horizontal: getProportionateScreenWidth(6)),
                          ),
                          onPressed: buttonActivator(
                              state.allCertificate![index]!.progress!,
                              context,
                              state.allCertificate![index]!),
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.symmetric(
                                    vertical: getProportionateScreenHeight(2)),
                                child: Text(
                                  "Download\nSertifikat",
                                  style: TextStyle(
                                      fontSize: getProportionateScreenHeight(5),
                                      color: baruTextutih),
                                ),
                              ),
                              SizedBox(width: getProportionateScreenWidth(5)),
                              SvgPicture.asset(
                                'assets/icons/download.svg',
                                fit: BoxFit.fitWidth,
                                width: getProportionateScreenWidth(12),
                              )
                            ],
                          ),
                        ),
                        SizedBox(width: getProportionateScreenWidth(10)),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget certificateCountComponents(
    String count,
    BuildContext context,
  ) {
    return Center(
      child: ListView(
        children: [
          Container(
            padding: const EdgeInsets.all(20.0),
            constraints: BoxConstraints(
                minHeight: MediaQuery.of(context).size.height / 1.5),
            child: Center(
              child: Text(count),
            ),
          )
        ],
      ),
    );
  }
}
