import 'package:flutter/material.dart';
import 'package:initial_folder/models/my_certificate.dart';
import 'package:initial_folder/providers/certificate_provider.dart';
import 'package:initial_folder/screens/certificate/component/all_certificate_header.dart';
import 'package:initial_folder/screens/course/sertif.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';

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

  @override
  State<JustCertificateCount> createState() => _JustCertificateCountState();
}

class _JustCertificateCountState extends State<JustCertificateCount> {
  @override
  Widget build(BuildContext context) {
    return Consumer<CertificateProvider>(
      builder: (context, value, child) {
        return certificateCountComponent(
            'assets/icons/gold-medal.png',
            value.allCertificateCount.toString(),
            'Jumlah Sertifikat Selesai',
            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)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      children: [
                        Image.asset(
                          icon,
                          width: getProportionateScreenWidth(18),
                          height: getProportionateScreenHeight(18),
                        ),
                        SizedBox(width: getProportionateScreenWidth(8)),
                        Text(
                          content,
                          style: thirdTextStyle.copyWith(
                              letterSpacing: 0.42,
                              fontWeight: semiBold,
                              fontSize: getProportionateScreenWidth(12)),
                        ),
                        SizedBox(width: getProportionateScreenWidth(4)),
                        Text(
                          count,
                          style: thirdTextStyle.copyWith(
                              letterSpacing: 0.42,
                              fontWeight: semiBold,
                              fontSize: getProportionateScreenWidth(17)),
                        ),
                      ],
                    ),
                  ],
                ),
                SizedBox(height: getProportionateScreenHeight(5)),
              ],
            );
          } 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 {
            return Column(
              children: [],
            );
          }
        },
      ),
    );
  }

  instructorProfile(DataMyCertificateModel certificate) {
    if (certificate.fotoProfile == null) {
      return Image.asset(
        "assets/images/Profile Image.png",
        scale: getProportionateScreenWidth(12),
      );
    } else
      return CircleAvatar(
        radius: getProportionateScreenWidth(8),
        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,
          MaterialPageRoute(
            builder: (context) => Sertif(
              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(90),
        padding:
            EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(8)),
        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(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Padding(
                padding: EdgeInsets.all(getProportionateScreenHeight(10)),
                child: Image.asset(
                  'assets/icons/gold-medal.png',
                  fit: BoxFit.cover,
                  scale: getProportionateScreenWidth(2.2),
                )),
            Padding(
              padding: EdgeInsets.symmetric(
                  vertical: getProportionateScreenHeight(5)),
              child: Container(
                height: double.infinity,
                child:
                    VerticalDivider(color: Color.fromRGBO(52, 121, 148, 0.9)),
              ),
            ),
            SizedBox(
              width: getProportionateScreenWidth(150),
              child: Padding(
                padding: EdgeInsets.symmetric(
                    vertical: getProportionateScreenHeight(3),
                    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: getProportionateScreenHeight(12),
                          fontWeight: reguler),
                    ),
                    SizedBox(height: getProportionateScreenHeight(5)),
                    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(10)),
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: getProportionateScreenHeight(5)),
                    Row(
                      children: [
                        Expanded(
                          child: Stack(
                            children: [
                              Container(
                                width: (SizeConfig.screenWidth -
                                    getProportionateScreenWidth(245)),
                                height: 10,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Colors.white),
                              ),
                              Container(
                                width: (SizeConfig.screenWidth -
                                        getProportionateScreenWidth(245)) *
                                    state.allCertificate![index]!.progress! /
                                    100,
                                height: 10,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: primaryColor),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(
                              horizontal: getProportionateScreenWidth(3)),
                          child: Container(
                            child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                "${state.allCertificate![index]!.progress!.toString()}%",
                                style: TextStyle(
                                    fontSize: 10,
                                    color: Colors.white,
                                    fontWeight: bold),
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5),
                  ),
                  backgroundColor: Color.fromRGBO(45, 45, 45, 1),
                  disabledForegroundColor:
                      Color.fromRGBO(150, 150, 150, 1).withOpacity(0.38),
                  disabledBackgroundColor:
                      Color.fromRGBO(150, 150, 150, 1).withOpacity(0.12),
                  padding: EdgeInsets.symmetric(
                      vertical: 5, horizontal: getProportionateScreenWidth(5))),
              onPressed: buttonActivator(
                  state.allCertificate![index]!.progress!,
                  context,
                  state.allCertificate![index]!),
              child: Row(
                children: [
                  Text(
                    "Download\nSertifikat",
                    style: TextStyle(
                        fontSize: getProportionateScreenHeight(8),
                        color: buttonOpacity(
                            state.allCertificate![index]!.progress!)),
                  ),
                  SizedBox(width: getProportionateScreenWidth(5)),
                  Image.asset(
                    'assets/icons/left-arrow.png',
                    color:
                        buttonOpacity(state.allCertificate![index]!.progress!),
                    fit: BoxFit.fitWidth,
                    width: getProportionateScreenWidth(20),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  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),
            ),
          )
        ],
      ),
    );
  }
}
