import 'package:easy_localization/src/public_ext.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:mohem_flutter_app/api/dashboard_api_client.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/theme/colors.dart';
import 'package:mohem_flutter_app/widgets/circular_avatar.dart';
import 'package:shimmer/shimmer.dart';

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

  @override
  _DashboardState createState() {
    return _DashboardState();
  }
}

class _DashboardState extends State<Dashboard> {
  @override
  void initState() {
    super.initState();
    DashbaordApiClient().getAttendanceTracking();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List<String> names = [LocaleKeys.workList.tr(), LocaleKeys.missingSwipes.tr(), LocaleKeys.leaveBalance.tr(), LocaleKeys.ticketBalance.tr()];
    List<double> namesInt = [118, 02, 18.5, 03];
    List<int> namesColor = [0xff125765, 0xff239D8F, 0xff2BB8A8, 0xff1D92AA];

    List<String> namesT = [LocaleKeys.monthlyAttendance.tr(), LocaleKeys.workFromHome.tr(), LocaleKeys.ticketRequest.tr(), LocaleKeys.monthlyAttendance.tr()];
    List<String> iconT = ["assets/images/monthly_attendance.svg", "assets/images/work_from_home.svg", "assets/images/ticket_request.svg", "assets/images/work_from_home.svg"];

    List<String> namesD = ["Nostalgia Perfume Perfume", "Al Nafoura", "AlJadi", "Nostalgia Perfume"];
    // DashbaordApiClient().getOpenNotifications();
    DashbaordApiClient().getOpenMissingSwipes();
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  CircularAvatar(
                    width: 34,
                    height: 34,
                    url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png",
                  ),
                  8.width,
                  SvgPicture.asset("assets/images/side_nav.svg"),
                ],
              ).onPress(() {}),
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    //AppLogo(),
                    8.width,
                    LocaleKeys.mohemm.tr().toText14()
                  ],
                ),
              ),
              SizedBox(
                width: 36,
                height: 36,
                child: Stack(
                  alignment: Alignment.centerLeft,
                  children: [
                    SvgPicture.asset("assets/images/announcements.svg"),
                    Positioned(
                      right: 0,
                      top: 0,
                      child: Container(
                        padding: const EdgeInsets.only(left: 5, right: 5),
                        decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)),
                        child: "3".toText12(color: Colors.white),
                      ),
                    )
                  ],
                ),
              )
            ],
          ).paddingOnly(left: 21, right: 21, top: 48, bottom: 7),
          Expanded(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color),
                    "Mahmoud Shrouf".toText24(isBold: true),
                    16.height,
                    Row(
                      children: [
                        Expanded(
                          child: AspectRatio(
                            aspectRatio: 159 / 159,
                            child: Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(15),
                                gradient: const LinearGradient(transform: GradientRotation(.46), begin: Alignment.topRight, end: Alignment.bottomRight, colors: [
                                  MyColors.gradiantEndColor,
                                  MyColors.gradiantStartColor,
                                ]),
                              ),
                              child: Stack(
                                alignment: Alignment.center,
                                children: [
                                  // SvgPicture.asset("assets/images/"),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Expanded(
                                        child: Column(
                                          mainAxisSize: MainAxisSize.min,
                                          crossAxisAlignment: CrossAxisAlignment.start,
                                          children: [
                                            LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true),
                                            9.height,
                                            "07:55:12".toText14(color: Colors.white, isBold: true),
                                            LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white),
                                            9.height,
                                            const ClipRRect(
                                              borderRadius: BorderRadius.all(
                                                Radius.circular(20),
                                              ),
                                              child: LinearProgressIndicator(
                                                value: 0.7,
                                                minHeight: 8,
                                                valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
                                                backgroundColor: const Color(0xff196D73),
                                              ),
                                            ),
                                          ],
                                        ).paddingOnly(top: 12, right: 15, left: 12),
                                      ),
                                      Row(
                                        children: [
                                          Expanded(
                                            child: Column(
                                              mainAxisSize: MainAxisSize.min,
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              children: [LocaleKeys.checkIn.tr().toText12(color: Colors.white), "09:00".toText14(color: Colors.white, isBold: true), 4.height],
                                            ).paddingOnly(left: 12),
                                          ),
                                          Container(
                                            width: 45,
                                            height: 45,
                                            padding: const EdgeInsets.only(left: 14, right: 14),
                                            decoration: const BoxDecoration(
                                              color: Color(0xff259EA4),
                                              borderRadius: BorderRadius.only(
                                                bottomRight: Radius.circular(15),
                                              ),
                                            ),
                                            child: SvgPicture.asset("assets/images/stop.svg"),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ).onPress(() {
                              Navigator.pushNamed(context, AppRoutes.todayAttendance);
                            }),
                          ),
                        ),
                        9.width,
                        Expanded(
                          child: GridView.builder(
                            shrinkWrap: true,
                            primary: false,
                            physics: const NeverScrollableScrollPhysics(),
                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2 / 2, crossAxisSpacing: 9, mainAxisSpacing: 9),
                            padding: EdgeInsets.zero,
                            itemCount: 4,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                decoration: BoxDecoration(
                                  color: Color(namesColor[index]),
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    names[index].toText12(color: Colors.white),
                                    Row(
                                      children: [
                                        Expanded(
                                          child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true),
                                        ),
                                        SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white)
                                      ],
                                    )
                                  ],
                                ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6),
                              ).onPress(() {
                                Navigator.pushNamed(context, AppRoutes.workList);
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                    20.height,
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              "Other".tr().toText12(),
                              LocaleKeys.services.tr().toText24(isBold: true),
                            ],
                          ),
                        ),
                        LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true),
                      ],
                    ),
                  ],
                ).paddingOnly(left: 21, right: 21, top: 7),
                SizedBox(
                  height: 105 + 26,
                  child: ListView.separated(
                      shrinkWrap: true,
                      physics: const BouncingScrollPhysics(),
                      padding: const EdgeInsets.only(left: 21, right: 21, top: 13, bottom: 13),
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (cxt, index) {
                        return AspectRatio(
                          aspectRatio: 105 / 105,
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(15),
                              boxShadow: [
                                BoxShadow(
                                  color: const Color(0xff000000).withOpacity(.05),
                                  blurRadius: 26,
                                  offset: const Offset(0, -3),
                                ),
                              ],
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SvgPicture.asset(iconT[index]),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    Expanded(
                                      child: namesT[index].toText11(isBold: true),
                                    ),
                                    SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4)
                                  ],
                                )
                              ],
                            ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12),
                          ),
                        );
                      },
                      separatorBuilder: (cxt, index) => 9.width,
                      itemCount: 4),
                ),
                8.height,
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.only(top: 31),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(50)),
                    border: Border.all(color: MyColors.lightGreyEDColor, width: 1),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                LocaleKeys.offers.tr().toText12(),
                                Row(
                                  children: [
                                    LocaleKeys.discounts.tr().toText24(isBold: true),
                                    6.width,
                                    Container(
                                        padding: const EdgeInsets.only(left: 8, right: 8),
                                        decoration: BoxDecoration(
                                          color: MyColors.yellowColor,
                                          borderRadius: BorderRadius.circular(10),
                                        ),
                                        child: LocaleKeys.newString.tr().toText10(isBold: true)),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          LocaleKeys.viewAllOffers.tr().toText12(isUnderLine: true),
                        ],
                      ).paddingOnly(left: 21, right: 21),
                      SizedBox(
                        height: 103 + 33,
                        child: ListView.separated(
                            shrinkWrap: true,
                            physics: const BouncingScrollPhysics(),
                            padding: const EdgeInsets.only(left: 21, right: 21, top: 13),
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (cxt, index) {
                              return SizedBox(
                                width: 73,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Container(
                                      width: 73,
                                      height: 73,
                                      decoration: BoxDecoration(
                                        borderRadius: const BorderRadius.all(
                                          Radius.circular(100),
                                        ),
                                        border: Border.all(color: MyColors.lightGreyEDColor, width: 1),
                                      ),
                                      child: ClipRRect(
                                        borderRadius: const BorderRadius.all(
                                          Radius.circular(50),
                                        ),
                                        child: Image.network(
                                          "https://play-lh.googleusercontent.com/NPo88ojmhah4HDiposucJmfQIop4z4xc8kqJK9ITO9o-yCab2zxIp7PPB_XPj2iUojo",
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ),
                                    4.height,
                                    Expanded(
                                      child: namesD[6 % (index + 1)].toText12(isCenter: true, maxLine: 2),
                                    ),
                                  ],
                                ),
                              );
                            },
                            separatorBuilder: (cxt, index) => 8.width,
                            itemCount: 6),
                      ),
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
