import 'package:easy_localization/src/public_ext.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_step_progress_bar.dart';

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

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

class _TodayAttendanceScreenState extends State<TodayAttendanceScreen> {
  @override
  void initState() {
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: MyColors.backgroundBlackColor,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      backgroundColor: Colors.white,
      body: ListView(
        children: [
          Container(
            color: MyColors.backgroundBlackColor,
            padding: EdgeInsets.only(top: 4,left: 21, right: 21, bottom: 21),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                "June 13, 2021".toText24(isBold: true, color: Colors.white),
                LocaleKeys.timeLeftToday.tr().toText16(color: Color(0xffACACAC)),
                21.height,
                Center(
                  child: CircularStepProgressBar(
                    totalSteps: 16 * 4,
                    currentStep: 16,
                    width: 216,
                    height: 216,
                    selectedColor: MyColors.gradiantEndColor,
                    unselectedColor: MyColors.grey70Color,
                    child: Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          "08:58:15".toText32(color: Colors.white, isBold: true),
                          19.height,
                          "Shift Time".tr().toText12(color: MyColors.greyACColor),
                          "08:00 - 17:00".toText22(color: Colors.white, isBold: true),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            color: MyColors.backgroundBlackColor,
            child: Stack(
              children: [
                Container(
                  height: 187,
                  padding: EdgeInsets.only(left: 31, right: 31, top: 31, bottom: 16),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)),
                    gradient: const LinearGradient(transform: GradientRotation(.64), begin: Alignment.topRight, end: Alignment.bottomRight, colors: [
                      MyColors.gradiantEndColor,
                      MyColors.gradiantStartColor,
                    ]),
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [commonStatusView("Check In", "09:27"), commonStatusView("Check Out", "- - : - -")],
                      ),
                      21.height,
                      Row(
                        children: [commonStatusView("Late In", "00:27"), commonStatusView("Regular", "08:00")],
                      ),
                    ],
                  ),
                ),
                Container(
                  width: double.infinity,
                  decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), color: Colors.white),
                  margin: EdgeInsets.only(top: 187 - 31),
                  padding: EdgeInsets.only(left: 21, right: 21, top: 24, bottom: 24),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      "Mark".tr().toText12(),
                      "Attendance".tr().toText24(),
                      "Select the method to mark the attendance".tr().toText12(color: Color(0xff535353)),
                      24.height,
                      GridView(
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        padding: EdgeInsets.zero,
                        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 1 / 1, crossAxisSpacing: 8, mainAxisSpacing: 8),
                        children: <Widget>[
                          attendanceMethod("NFC", "assets/images/nfc.svg", () {}),
                          attendanceMethod("Wifi", "assets/images/wufu.svg", () {}),
                        ],
                      )
                    ],
                  ),
                ),
                // Positioned(
                //   top: 187 - 21,
                //   child: Container(
                //     padding: EdgeInsets.only(left: 31, right: 31, top: 31, bottom: 16),
                //     decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), color: Colors.white),
                //     child: Column(
                //       children: [
                //         Row(
                //           children: [commonStatusView("Check In", "09:27"), commonStatusView("Check Out", "- - : - -")],
                //         ),
                //         21.height,
                //         Row(
                //           children: [commonStatusView("Late In", "00:27"), commonStatusView("Regular", "08:00")],
                //         ),
                //       ],
                //     ),
                //   ),
                // ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget attendanceMethod(String title, String image, VoidCallback onPress) => Container(
        padding: const EdgeInsets.only(left: 10, right: 10, top: 14, bottom: 14),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          gradient: const LinearGradient(transform: GradientRotation(.64), begin: Alignment.topRight, end: Alignment.bottomRight, colors: [
            MyColors.gradiantEndColor,
            MyColors.gradiantStartColor,
          ]),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [Expanded(child: SvgPicture.asset(image)), title.toText17(isBold: true, color: Colors.white)],
        ),
      ).onPress(onPress);

  Widget commonStatusView(String title, String time) => Expanded(
        child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [
          title.toText12(color: Colors.white),
          time.toText22(color: Colors.white, isBold: true),
        ]),
      );
}