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/classes/colors.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/widgets/circular_avatar.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();
  }

  @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"];

    return Scaffold(
      body: Column(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            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),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
              14.height,
              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,
                                      ClipRRect(
                                        borderRadius: const 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"),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  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),
                        );
                      },
                    ),
                  ),
                ],
              ),
              20.height,
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        LocaleKeys.other.tr().toText12(),
                        LocaleKeys.services.tr().toText24(isBold: true),
                      ],
                    ),
                  ),
                  LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true),
                ],
              ),
            ],
          ).paddingOnly(left: 21, right: 21, top: 48),
          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),
          )
        ],
      ),
    );
  }
}