import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';
import 'package:flutter_svg/svg.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:intl/intl.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:signature/signature.dart';
import 'package:unit2/model/login_data/user_info/user_data.dart';
import 'package:unit2/theme-data.dart/btn-style.dart';
import 'package:unit2/utils/global.dart';
import 'package:unit2/utils/text_container.dart';
import '../../../bloc/user/user_bloc.dart';
import '../../../theme-data.dart/colors.dart';
import '../../../widgets/splash_screen.dart';
import '../signature/signature_pad.dart';
import './components/cover-image.dart';

class BasicInfo extends StatelessWidget {
  const BasicInfo({super.key});

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return Future.value(true);
      },
      child: ProgressHUD(
        child: BlocBuilder<UserBloc, UserState>(
          builder: (context, state) {
            if (state is UserLoggedIn) {
              state.userData!.employeeInfo!.profile!.sex!.toUpperCase();
              return SafeArea(
                child: Scaffold(
                  body: SizedBox(
                    width: screenWidth,
                    child: Column(
                      children: [
                        Stack(
                          clipBehavior: Clip.none,
                          alignment: Alignment.center,
                          children: [
                            const CoverImage(),
                            Positioned(
                              top: blockSizeVertical * 17.5,
                              child: Stack(
                                alignment: Alignment.center,
                                children: [
                                  const CircleAvatar(
                                    radius: 72,
                                    backgroundColor: Colors.white,
                                  ),
                                  CircleAvatar(
                                    radius: 69,
                                    backgroundColor: Colors.grey.shade800,
                                    child: SvgPicture.asset(
                                      'assets/svgs/male.svg',
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Positioned(
                                top: 10,
                                left: 20,
                                child: IconButton(
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },
                                  icon: const Icon(
                                    FontAwesome5.arrow_left,
                                    size: 24,
                                    color: Colors.white,
                                  ),
                                )),
                            Positioned(
                                top: 10,
                                right: 20,
                                child: IconButton(
                                  onPressed: () {},
                                  icon: const Icon(
                                    Icons.edit,
                                    size: 24,
                                    color: Colors.white,
                                  ),
                                )),
                          ],
                        ),
                        SizedBox(
                          height: blockSizeVertical * 5,
                        ),
                        BuildInformation(
                          userData: state.userData!,
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }
            return const UniTSplashScreen();
          },
        ),
      ),
    );
  }
}

class BuildInformation extends StatelessWidget {
  final UserData userData;
  const BuildInformation({super.key, required this.userData});
  @override
  Widget build(BuildContext context) {
    DateFormat dteFormat2 = DateFormat.yMMMMd('en_US');
    final String firstName =
        userData.user!.login!.user!.firstName!.toUpperCase();
    final String lastname = userData.user!.login!.user!.lastName!.toUpperCase();
    final String middlename =
        userData.employeeInfo!.profile!.middleName!.toUpperCase();
    final String sex = userData.employeeInfo!.profile!.sex!.toUpperCase();
    final DateTime? bday = userData.employeeInfo!.profile!.birthdate;
    final uuid = userData.employeeInfo!.uuid;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 25),
      width: screenWidth,
      child: Column(
        children: [
          const SizedBox(
            height: 25,
          ),
          Text(
            "$firstName $middlename $lastname",
            textAlign: TextAlign.center,
            style: Theme.of(context)
                .textTheme
                .headline5!
                .copyWith(fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            "${dteFormat2.format(bday!)} | $sex",
            style: Theme.of(context).textTheme.caption!.copyWith(fontSize: 18),
          ),
          const SizedBox(
            height: 15,
          ),
          QrImage(
            data: uuid!,
            size: blockSizeVertical * 30,
          ),
          const SizedBox(
            height: 25,
          ),
          SizedBox(
            width: screenWidth * .60,
            height: blockSizeVertical * 6,
            child: SizedBox(
              child: ElevatedButton.icon(
                  style:
                      mainBtnStyle(third, Colors.transparent, Colors.white54),
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
                      return SignaturePad();
                    }));
                  },
                  icon: const Icon(
                    FontAwesome5.signature,
                    size: 15,
                  ),
                  label: const Text(signature)),
            ),
          ),
          const SizedBox(
            height: 5,
          ),
        ],
      ),
    );
  }
}