import 'package:easy_localization/easy_localization.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/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/models/member_information_list_model.dart';
import 'package:mohem_flutter_app/models/profile_menu.model.dart';

class ProfileInFo extends StatelessWidget {
  MemberInformationListModel memberInfo;

  ProfileInFo(this.memberInfo, {Key? key}) : super(key: key);

  List<ProfileMenu> menu = [
    ProfileMenu(name: LocaleKeys.profile_personalInformation.tr(), icon: 'personal-info.svg', route: AppRoutes.personalInfo),
    ProfileMenu(name: LocaleKeys.profile_basicDetails.tr(), icon: 'basic-details.svg', route: AppRoutes.basicDetails),
    ProfileMenu(name: LocaleKeys.profile_contactDetails.tr(), icon: 'contact-details.svg', route: AppRoutes.contactDetails),
    ProfileMenu(name: LocaleKeys.profile_familyDetails.tr(), icon: 'family-members.svg', route: AppRoutes.familyMembers),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        16.height,
        memberInfo.eMPLOYEENAME!.toText22(),
        ("${memberInfo.eMPLOYEENUMBER!} | ${memberInfo.getPositionName()}").toText13(color: MyColors.grey80Color),
        memberInfo.eMPLOYEEEMAILADDRESS!.toText13(),
        12.height,
        const Divider(height: 8, thickness: 8, color: MyColors.lightGreyEFColor),
        12.height,
        LocaleKeys.completingYear.tr().toText11(),
        Row(children: [
          appreciationTime(LocaleKeys.year.tr(), memberInfo.sERVICEYEARS.toString()),
          appreciationTime(LocaleKeys.month.tr(), memberInfo.sERVICEMONTHS.toString()),
          appreciationTime(LocaleKeys.day.tr(), memberInfo.sERVICEDAYS.toString()),
        ]).paddingOnly(bottom: 12, top: 12),
        const Divider(height: 8, thickness: 8, color: MyColors.lightGreyEFColor),
        // Column(
        //   //  mainAxisAlignment: MainAxisAlignment.start,
        //   crossAxisAlignment: CrossAxisAlignment.start,
        //   children: [
        //     (LocaleKeys.profile_profileCompletionPer.tr() + ' 75%').toText16(),
        //     8.height,
        //     Row(
        //       children: [
        //         for (var i = 0; i < 4; i++)
        //           if (i < 3) Expanded(child: drawSlider(Color(0xff2BB8A6))) else Expanded(child: drawSlider(const Color(0xffefefef)))
        //       ],
        //     ),
        //     14.height,
        //     LocaleKeys.profile_completeProfile.tr().toText16(color: MyColors.textMixColor, isUnderLine: true),
        //   ],
        // ).paddingOnly(left: 21, right: 21, bottom: 18, top: 12),
        // const Divider(height: 8, thickness: 8, color: MyColors.lightGreyEFColor),
        ListView.separated(
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (cxt, index) => Row(
                  children: [
                    SvgPicture.asset('assets/images/' + menu[index].icon, width: 20, height: 20),
                    16.width,
                    menu[index].name.toText16().expanded,
                    16.width,
                    const Icon(Icons.arrow_forward, color: MyColors.darkIconColor)
                  ],
                ).onPress(() {
                  Navigator.pushNamed(context, menu[index].route);
                }).paddingOnly(left: 21, right: 21, top: 21),
            separatorBuilder: (cxt, index) => 12.height,
            itemCount: menu.length),
      ],
    );
  }

  Widget drawSlider(color) {
    return Row(children: [
      Expanded(
          flex: 1,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Container(
              height: 6,
              width: 20,
              color: color,
            ),
          )),
      Container(height: 6, width: 3, color: Colors.white),
    ]);
  }

  Widget appreciationTime(String title, String value) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        title.toText13(color: MyColors.grey80Color),
        value.padLeft(2, '0').toText20(color: MyColors.textMixColor),
      ],
    ).expanded;
  }
}
