import 'package:easy_localization/src/public_ext.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/ui/app_bar.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';

class WorkListScreen extends StatefulWidget {
  @override
  State<WorkListScreen> createState() => _WorkListScreenState();
}

class _WorkListScreenState extends State<WorkListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: appBar(
        context,
        title: LocaleKeys.workList.tr(),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: double.infinity,
              height: 2,
              color: MyColors.darkWhiteColor,
            ),
            Container(
              width: double.infinity,
              height: 40,
              margin: EdgeInsets.only(
                top: 21,
              ),
              child: ListView.separated(
                itemBuilder: (context, index) {
                  return Container(
                    padding: EdgeInsets.only(
                      left: 30,
                      right: 30,
                    ),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(6),
                      color: tabList[index].isSelected
                          ? MyColors.darkIconColor
                          : MyColors.lightGreyEAColor,
                    ),
                    child: tabList[index].title.toText12(
                          color: tabList[index].isSelected
                              ? MyColors.white
                              : MyColors.black,
                        ),
                  );
                },
                separatorBuilder: (context, index) {
                  return 8.width;
                },
                shrinkWrap: true,
                itemCount: tabList.length,
                scrollDirection: Axis.horizontal,
                padding: const EdgeInsets.only(
                  left: 21,
                  right: 21,
                ),
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                LocaleKeys.human.toText12(),
                LocaleKeys.resources.tr().toText24(isBold: true),
              ],
            ).paddingOnly(top: 24, left: 21, right: 21),
            24.height,
            Expanded(
              child: ListView.separated(
                itemBuilder: (context, index) {
                  return rowItem(typesList[index]);
                },
                separatorBuilder: (context, index) {
                  return 12.height;
                },
                itemCount: typesList.length,
                padding: EdgeInsets.only(left: 21, right: 21),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget rowItem(Types types) {
    return InkWell(
      onTap: (){
        Navigator.pushNamed(context, AppRoutes.missingSwipe);
      },
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: const Color(0xff000000).withOpacity(.05),
              blurRadius: 26,
              offset: const Offset(0, -3),
            ),
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                gradient: LinearGradient(
                    transform: GradientRotation(.46),
                    begin: Alignment.topRight,
                    end: Alignment.bottomRight,
                    colors: types.colors),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SvgPicture.asset(
                    "assets/images/miss_swipe.svg",
                    color: Colors.white,
                  ),
                  2.height,
                  types.title.toText10(color: Colors.white)
                ],
              ).paddingAll(6),
            ),
            12.width,
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  "Missing Swipe Request".toText16(),
                  "Missing Swipe Request for Hussain, Mohammad has been approved"
                      .toText10(),
                  12.height,
                  Row(
                    children: [
                      Expanded(
                          child: "07 Jan 2021"
                              .toText10(color: MyColors.lightTextColor)),
                      SvgPicture.asset(
                        "assets/images/arrow_next.svg",
                        color: MyColors.darkIconColor,
                      )
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Tabs {
  String title;
  bool isSelected;

  Tabs(this.title, this.isSelected);
}

List<Tabs> tabList = [
  Tabs("All", true),
  Tabs("HR", false),
  Tabs("MO", false),
  Tabs("PR", false),
  Tabs("PO", false),
];

class Types {
  String title;
  List<Color> colors;

  Types(this.title, this.colors);
}

List<Types> typesList = [
  Types("HR", [Color(0xff32D892), Color(0xff1AB170)]),
  Types("ITG", [Color(0xffEB8C90), Color(0xffDE6C70)]),
  Types("PO", [Color(0xff5099E3), Color(0xff3670AA)]),
  Types("PR", [Color(0xff48EACF), Color(0xff3DCAB3)]),
  Types("MO", [Color(0xff58DCFA), Color(0xff3CB9D5)]),
];
