import 'dart:math' as math;

import 'package:auto_size_text/auto_size_text.dart';
import 'package:diplomaticquarterapp/config/size_config.dart';
import 'package:diplomaticquarterapp/core/viewModels/dashboard_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/models/Appointments/AppoimentAllHistoryResultList.dart';
import 'package:diplomaticquarterapp/models/Appointments/toDoCountProviderModel.dart';
import 'package:diplomaticquarterapp/models/Authentication/authenticated_user.dart';
import 'package:diplomaticquarterapp/models/apple_pay_response.dart';
import 'package:diplomaticquarterapp/models/gradient_color.dart';
import 'package:diplomaticquarterapp/models/hmg_services.dart';
import 'package:diplomaticquarterapp/models/slider_data.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/all_habib_medical_service_page2.dart';
import 'package:diplomaticquarterapp/pages/landing/widgets/logged_slider_view.dart';
import 'package:diplomaticquarterapp/pages/landing/widgets/services_view.dart';
import 'package:diplomaticquarterapp/pages/landing/widgets/slider_view.dart';
import 'package:diplomaticquarterapp/pages/packages_offers/packages_offers_tab_pager.dart';
import 'package:diplomaticquarterapp/theme/colors.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/uitl/utils.dart';
import 'package:diplomaticquarterapp/uitl/utils_new.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

class HomePageFragment2 extends StatefulWidget {
  DashboardViewModel model;
  Function onPharmacyClick, onLoginClick, onMedicalFileClick;

  HomePageFragment2(this.model, {this.onLoginClick, this.onPharmacyClick, this.onMedicalFileClick});

  @override
  _HomePageFragment2State createState() => _HomePageFragment2State();
}

class _HomePageFragment2State extends State<HomePageFragment2> {
  ProjectViewModel projectViewModel;
  List<HmgServices> hmgServices = [];
  List<AppoitmentAllHistoryResultList> appoList = [];
  ApplePayResponse applePayResponse;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    // getPatientAppointmentHistory1();
    //  getFamilyFiles();
  }

  initialiseHmgServices(bool isLogin) {
    hmgServices.clear();
    hmgServices.add(new HmgServices(0, TranslationBase.of(context).liveCare, TranslationBase.of(context).onlineConsulting, "assets/images/new/Live_Care.svg", isLogin));
    hmgServices.add(new HmgServices(1, TranslationBase.of(context).covidTest, TranslationBase.of(context).driveThru, "assets/images/new/CoronaIcon.svg", isLogin));
    hmgServices.add(new HmgServices(2, TranslationBase.of(context).online, TranslationBase.of(context).payment, "assets/images/new/paymentMethods.png", isLogin));
    hmgServices.add(new HmgServices(3, TranslationBase.of(context).hhcHome, TranslationBase.of(context).healthCare, "assets/images/new/HHC.svg", isLogin));
    hmgServices.add(new HmgServices(4, TranslationBase.of(context).checkup, TranslationBase.of(context).comprehensive, "assets/images/new/comprehensive_checkup.svg", isLogin));
    hmgServices.add(new HmgServices(5, TranslationBase.of(context).emergencyTitle, TranslationBase.of(context).emergencySubtitle, "assets/images/new/emergency.svg", isLogin));
    hmgServices.add(new HmgServices(6, TranslationBase.of(context).ereferralTitle, TranslationBase.of(context).ereferralSubtitle, "assets/images/new/E_Referral.svg", isLogin));
    hmgServices.add(new HmgServices(7, "H\u2082O", TranslationBase.of(context).dailyWater, "assets/images/new/h2o.svg", isLogin));
    hmgServices.add(new HmgServices(8, TranslationBase.of(context).connectTitle, TranslationBase.of(context).connectSubtitle, "assets/images/new/reach_us.svg", isLogin));
  }

  @override
  Widget build(BuildContext context) {
    projectViewModel = Provider.of(context);
    initialiseHmgServices(false);
    var appoCountProvider = Provider.of<ToDoCountProviderModel>(context);
    var userProvider = Provider.of<ToDoCountProviderModel>(context);
    List<Widget> myMedicalList = Utils.myMedicalListHomePage(projectViewModel: projectViewModel, context: context, count: appoCountProvider.count, isLogin: projectViewModel.isLogin);
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          projectViewModel.isLogin
              ? AspectRatio(
                  aspectRatio: 2.6,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 20, right: 20, top: 8, bottom: 6),
                    child: InkWell(
                      onTap: () {
                        widget.onMedicalFileClick();
                      },
                      child: LoggedSliderView(
                        projectViewModel,
                        new SliderData(TranslationBase.of(context).fileno + ": " + (projectViewModel.user?.patientID?.toString() ?? ""),
                            projectViewModel.user.firstName + ' ' + (projectViewModel.user?.lastName ?? ""), "", bannerColor[0].darkColor, bannerColor[0].lightColor),
                        widget.model,
                      ),
                    ),
                  ),
                )
              : AspectRatio(
                  aspectRatio: 2.6,
                  child: Container(
                    margin: EdgeInsets.only(left: 20, right: 20, top: 8, bottom: 6),
                    child: SliderView(
                      onLoginClick: () {
                        widget.onLoginClick();
                        projectViewModel.analytics.loginRegistration.login_register_initiate();
                      },
                    ),
                    // height: MediaQuery.of(context).size.width / 2.6,
                  ),
                ),
          projectViewModel.isLogin
              ? Column(
                  children: [
                    Padding(
                      padding: projectViewModel.isArabic
                          ? EdgeInsets.only(
                              right: 20,
                              left: 8,
                            )
                          : EdgeInsets.only(
                              left: 20,
                              right: 8,
                            ),
                      child: Row(
                        children: [
                          Expanded(
                            child: Text(
                              TranslationBase.of(context).myMedicalFile,
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 16,
                                fontWeight: FontWeight.bold,
                                letterSpacing: -0.96,
                                height: 19 / 16,
                              ),
                            ),
                          ),
                          TextButton(
                            onPressed: () {
                              widget.onMedicalFileClick();
                              // navigateTo(context, MedicalProfilePageNew());
                            },
                            child: Text(
                              TranslationBase.of(context).viewMedicalFile,
                              style: TextStyle(
                                color: CustomColors.accentColor,
                                fontSize: 12,
                                letterSpacing: -0.72,
                                height: 23 / 12,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    mHeight(4),
                    Container(
                      width: double.infinity,
                      height: MediaQuery.of(context).size.width * 0.26,
                      child: ListView.separated(
                        itemCount: myMedicalList.length,
                        padding: EdgeInsets.zero,
                        scrollDirection: Axis.horizontal,
                        physics: BouncingScrollPhysics(),
                        itemBuilder: (context, index) {
                          return projectViewModel.isArabic
                              ? Container(
                                  child: myMedicalList[index],
                                  width: MediaQuery.of(context).size.width * 0.26,
                                  height: MediaQuery.of(context).size.width * 0.26,
                                  margin: EdgeInsets.only(left: index == 4 ? 20 : 0, right: index == 0 ? 20 : 0),
                                )
                              : Container(
                                  child: myMedicalList[index],
                                  width: MediaQuery.of(context).size.width * 0.26,
                                  height: MediaQuery.of(context).size.width * 0.26,
                                  margin: EdgeInsets.only(left: index == 0 ? 20 : 0, right: index == 4 ? 20 : 0),
                                );
                        },
                        separatorBuilder: (BuildContext context, int index) {
                          return mWidth(12);
                        },
                      ),
                    ),
                  ],
                )
              : Container(),
          mHeight(16),
          Column(
            children: [
              Divider(
                height: 1,
                color: Color(0xFFC7C7C7),
              ),
              Container(
                width: double.infinity,
                height: MediaQuery.of(context).size.width * 0.3,
                padding: EdgeInsets.only(left: 20, right: 20, top: 14, bottom: 14),
                color: Colors.white,
                child: Row(
                  children: [
                    offersButton(),
                    mWidth(10),
                    hmgButton(),
                  ],
                ),
              ),
              Divider(
                height: 1,
                color: Color(0xFFC7C7C7),
              ),
            ],
          ),
          mHeight(12),
          Column(
            children: [
              Padding(
                padding: projectViewModel.isArabic
                    ? const EdgeInsets.only(
                        left: 8,
                        right: 20,
                      )
                    : const EdgeInsets.only(
                        left: 20,
                        right: 8,
                      ),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        TranslationBase.of(context).hMGService,
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          letterSpacing: -0.96,
                          height: 19 / 16,
                        ),
                      ),
                    ),
                    TextButton(
                      onPressed: () {
                        // AppSharedPreferences().getAll().then((value){
                        //   debugPrint("ALL SHARED PREFERENCES!!!!!");
                        //   debugPrint(jsonEncode(value));
                        // });
                        Navigator.push(context, FadePage(page: AllHabibMedicalSevicePage2()));
                        projectViewModel.analytics.hmgServices.viewAll();
                      },
                      child: Text(
                        TranslationBase.of(context).viewAllServices,
                        style: TextStyle(
                          color: CustomColors.accentColor,
                          fontSize: 12,
                          letterSpacing: -0.72,
                          height: 23 / 12,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                  left: 20,
                  right: 20,
                  top: 0,
                ),
                child: GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 2 / 2, crossAxisSpacing: 12, mainAxisSpacing: 12),
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: hmgServices.length,
                  padding: EdgeInsets.zero,
                  itemBuilder: (BuildContext context, int index) {
                    return ServicesView(hmgServices[index], index);
                  },
                ),
              ),
            ],
          ),
          mHeight(140),
        ],
      ),
    );
  }

  Widget offersButton() {
    final bypassPrivilageCheck = false;
    return Expanded(
      flex: 1,
      child: InkWell(
        onTap: () {
          AuthenticatedUser user = projectViewModel.user;
          if (projectViewModel.havePrivilege(82) || bypassPrivilageCheck) Navigator.of(context).push(MaterialPageRoute(builder: (context) => PackagesOfferTabPage(user)));
          projectViewModel.analytics.offerPackages.log();
        },
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: double.infinity,
              clipBehavior: Clip.antiAlias,
              decoration: containerRadiusWithGradientServices(20, lightColor: CustomColors.lightGreyColor, darkColor: CustomColors.lightGreyColor),
              child: Stack(
                children: [
                  Container(
                    width: double.infinity,
                    height: double.infinity,
                    // color: Color(0xFF2B353E),
                    decoration: containerRadius(Color(0xFF2B353E), 20),
                  ),
                  Container(
                    width: double.infinity,
                    height: double.infinity,
                    clipBehavior: Clip.antiAlias,
                    decoration: projectViewModel.isArabic
                        ? containerBottomRightRadiusWithGradientForAr(60, lightColor: CustomColors.lightGreyColor, darkColor: CustomColors.lightGreyColor)
                        : containerBottomRightRadiusWithGradient(60, lightColor: CustomColors.lightGreyColor, darkColor: CustomColors.lightGreyColor),
                    child: Stack(
                      children: [
                        SvgPicture.asset(
                          "assets/images/new/strips.svg",
                          width: double.infinity,
                          height: double.infinity,
                          fit: BoxFit.cover,
                        ),
                      ],
                    ),
                  ),
                  projectViewModel.isArabic
                      ? Positioned(
                          left: 20,
                          top: 12,
                          child: Opacity(
                            opacity: 0.04,
                            child: SvgPicture.asset(
                              "assets/images/new/logo.svg",
                              height: MediaQuery.of(context).size.width * 0.14,
                            ),
                          ),
                        )
                      : Positioned(
                          right: 20,
                          top: 12,
                          child: Opacity(
                            opacity: 0.04,
                            child: SvgPicture.asset(
                              "assets/images/new/logo.svg",
                              height: MediaQuery.of(context).size.width * 0.14,
                            ),
                          ),
                        ),
                  projectViewModel.isArabic
                      ? Positioned(
                          right: -16,
                          top: 2,
                          child: Transform.rotate(
                            angle: math.pi / 4,
                            child: Container(
                              padding: EdgeInsets.only(left: 18, right: 18, top: 6, bottom: 3),
                              color: CustomColors.accentColor,
                              child: Text(
                                TranslationBase.of(context).newDes,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 9,
                                  height: 0.8,
                                  letterSpacing: -0.27,
                                ),
                              ),
                            ),
                          ),
                        )
                      : Positioned(
                          left: -16,
                          top: 2,
                          child: Transform.rotate(
                            angle: -math.pi / 4,
                            child: Container(
                              padding: EdgeInsets.only(left: 18, right: 18, top: 6, bottom: 3),
                              color: CustomColors.accentColor,
                              child: Text(
                                TranslationBase.of(context).newDes,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 9,
                                  letterSpacing: -0.27,
                                  height: 1.2,
                                ),
                              ),
                            ),
                          ),
                        ),
                  Container(
                    width: double.infinity,
                    height: double.infinity,
                    padding: EdgeInsets.only(left: projectViewModel.isArabic ? 20 : 25, right: projectViewModel.isArabic ? 25 : 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        mFlex(3),
                        AutoSizeText(
                          TranslationBase.of(context).offersdiscount,
                          maxLines: 1,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                            letterSpacing: -0.75,
                            height: 1,
                          ),
                        ),
                        projectViewModel.isArabic ? mHeight(4) : Container(),
                        Text(
                          TranslationBase.of(context).explore,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 9,
                            fontWeight: FontWeight.w600,
                            letterSpacing: -0.27,
                            height: projectViewModel.isArabic ? 0.8 : 1,
                          ),
                        ),
                        mFlex(1),
                        Row(
                          children: [
                            showFloating("assets/images/new/ear.svg"),
                            mWidth(4),
                            showFloating("assets/images/new/head.svg"),
                            mWidth(4),
                            showFloating("assets/images/new/tooth.svg"),
                          ],
                        ),
                        mFlex(2)
                      ],
                    ),
                  ),
                ],
              ),
            ),
            projectViewModel.havePrivilege(82) || bypassPrivilageCheck
                ? Container()
                : Container(
                    width: double.infinity,
                    height: double.infinity,
                    clipBehavior: Clip.antiAlias,
                    decoration: containerRadiusWithGradientServices(20, lightColor: CustomColors.lightGreyColor.withOpacity(0.7), darkColor: CustomColors.lightGreyColor.withOpacity(0.7)),
                    child: Icon(
                      Icons.lock_outline,
                      size: 40,
                    ),
                  )
          ],
        ),
      ),
    );
  }

  Widget hmgButton() {
    return Expanded(
      flex: 1,
      child: InkWell(
        onTap: () {
          widget.onPharmacyClick();
        },
        child: Container(
          width: double.infinity,
          height: double.infinity,
          clipBehavior: Clip.antiAlias,
          decoration: containerRadiusWithGradientServices(20, lightColor: CustomColors.lightGreyColor, darkColor: CustomColors.lightGreyColor),
          child: Stack(
            children: [
              Container(
                width: double.infinity,
                height: double.infinity,
                // color: Color(0xFF2B353E),
                decoration: containerRadius(Color(0xFF359846), 20),
              ),
              Container(
                width: double.infinity,
                height: double.infinity,
                clipBehavior: Clip.antiAlias,
                decoration: projectViewModel.isArabic
                    ? containerBottomRightRadiusWithGradientForAr(60, lightColor: CustomColors.lightGreyColor, darkColor: CustomColors.lightGreyColor)
                    : containerBottomRightRadiusWithGradient(60, lightColor: CustomColors.lightGreyColor, darkColor: CustomColors.lightGreyColor),
                child: Stack(
                  children: [
                    SvgPicture.asset(
                      "assets/images/new/strips.svg",
                      width: double.infinity,
                      height: double.infinity,
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
              ),
              projectViewModel.isArabic
                  ? Positioned(
                      left: 20,
                      top: 12,
                      child: Opacity(
                        opacity: 0.04,
                        child: SvgPicture.asset(
                          "assets/images/new/Pharmacy.svg",
                          height: MediaQuery.of(context).size.width * 0.15,
                        ),
                      ),
                    )
                  : Positioned(
                      right: 20,
                      top: 12,
                      child: Opacity(
                        opacity: 0.04,
                        child: SvgPicture.asset(
                          "assets/images/new/Pharmacy.svg",
                          height: MediaQuery.of(context).size.width * 0.15,
                        ),
                      ),
                    ),
              Container(
                width: double.infinity,
                height: double.infinity,
                padding: EdgeInsets.all(SizeConfig.widthMultiplier * 3.4),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      color: Colors.yellow,
                      // width: MediaQuery.of(context).size.width * 0.065,
                      child: SvgPicture.asset(
                        "assets/images/new/Pharmacy.svg",
                        height: MediaQuery.of(context).size.width * 0.08,
                      ),
                    ),
                    mFlex(1),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          TranslationBase.of(context).onlinePharmacy,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                            letterSpacing: -0.45,
                            height: 1,
                          ),
                        ),
                        projectViewModel.isArabic ? mHeight(5) : Container(),
                        Text(
                          TranslationBase.of(context).ecommerceSolution,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 9,
                            fontWeight: FontWeight.w600,
                            letterSpacing: -0.27,
                            height: projectViewModel.isArabic ? 0.2 : 1,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget showFloating(String icon) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.06,
      height: MediaQuery.of(context).size.width * 0.06,
      decoration: containerRadius(CustomColors.accentColor, 100),
      padding: EdgeInsets.all(4),
      child: SvgPicture.asset(icon),
    );
  }
}
