import 'package:cached_network_image/cached_network_image.dart';
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/screens/unit2/basic-info/components/qr_image.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 '../../../utils/urls.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) {
              String fileUrl =
                  '${Url.instance.prefixHost()}://${Url.instance.host()}/media/${state.userData?.employeeInfo?.profile?.photoPath}';
              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 * 15.5,
                            //   child: Stack(
                            //     alignment: Alignment.center,
                            //     children: [
                            //       CachedNetworkImage(
                            //         imageUrl: fileUrl,
                            //         imageBuilder: (context, imageProvider) =>
                            //             Container(
                            //           width: 160,
                            //           height: 160,
                            //           decoration: BoxDecoration(
                            //             border: Border.all(
                            //                 color: Colors.black26, width: 3),
                            //             shape: BoxShape.circle,
                            //             image: DecorationImage(
                            //                 image: imageProvider,
                            //                 fit: BoxFit.cover),
                            //           ),
                            //         ),
                            //         placeholder: (context, url) =>
                            //             const CircularProgressIndicator(),
                            //         errorWidget: (context, url, error) =>
                            //             Container(
                            //           width: 160,
                            //           height: 160,
                            //           decoration: BoxDecoration(
                            //             border: Border.all(
                            //                 color: Colors.white, width: 3),
                            //             shape: BoxShape.circle,
                            //           ),
                            //           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');
    globalFistname = globalFistname ?? userData.user!.login!.user!.firstName!.toUpperCase();
    globalLastname =globalLastname ?? userData.user!.login!.user!.lastName!.toUpperCase();
    globalMiddleName = globalMiddleName == null
        ? (userData.employeeInfo == null
            ? ''
            : userData.employeeInfo!.profile?.middleName?.toUpperCase())
        : '';
    globalSex = globalSex ?? userData.employeeInfo!.profile!.sex!.toUpperCase();
    globalBday = globalBday ?? 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(
            "$globalFistname ${globalMiddleName ?? ''} $globalLastname",
            textAlign: TextAlign.center,
            style: Theme.of(context)
                .textTheme
                .headlineSmall!
                .copyWith(fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            "${dteFormat2.format(globalBday!)} | $sex",
            style:
                Theme.of(context).textTheme.bodySmall!.copyWith(fontSize: 18),
          ),
          const SizedBox(
            height: 15,
          ),
          GestureDetector(
            onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (BuildContext context) {
                return QRFullScreenImage(uuid: uuid);
              }));
            },
            child: QrImage(
              data: uuid!,
              size: blockSizeVertical * 24,
            ),
          ),
          const SizedBox(
            height: 25,
          ),
          SizedBox(
            width: screenWidth * .60,
            height: blockSizeVertical * 7,
            child: SizedBox(
              child: ElevatedButton.icon(
                  style:
                      mainBtnStyle(third, Colors.transparent, Colors.white54),
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (BuildContext context) {
                      return const SignaturePad();
                    }));
                  },
                  icon: const Icon(
                    FontAwesome5.signature,
                    size: 15,
                  ),
                  label: const Text(signature)),
            ),
          ),
          const SizedBox(
            height: 5,
          ),
        ],
      ),
    );
  }
}