import 'package:diplomaticquarterapp/config/size_config.dart';
import 'package:diplomaticquarterapp/core/service/AuthenticatedUserObject.dart';
import 'package:diplomaticquarterapp/core/viewModels/dashboard_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/models/Appointments/toDoCountProviderModel.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/all_habib_medical_service_page.dart';
import 'package:diplomaticquarterapp/pages/ContactUs/contact_us_page.dart';
import 'package:diplomaticquarterapp/pages/Covid-DriveThru/covid-drivethru-location.dart';
import 'package:diplomaticquarterapp/pages/MyAppointments/MyAppointments.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/insurance/insurance_card_screen.dart';
import 'package:diplomaticquarterapp/pages/medical/doctor/doctor_home_page.dart';
import 'package:diplomaticquarterapp/pages/medical/labs/labs_home_page.dart';
import 'package:diplomaticquarterapp/pages/medical/prescriptions/prescriptions_home_page.dart';
import 'package:diplomaticquarterapp/pages/medical/radiology/radiology_home_page.dart';
import 'package:diplomaticquarterapp/pages/medical/vital_sign/vital_sign_details_screen.dart';
import 'package:diplomaticquarterapp/pages/paymentService/payment_service.dart';
import 'package:diplomaticquarterapp/pages/pharmacies/medicine_search_screen.dart';
import 'package:diplomaticquarterapp/services/clinic_services/get_clinic_service.dart';
import 'package:diplomaticquarterapp/uitl/app_toast.dart';
import 'package:diplomaticquarterapp/uitl/date_uitl.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/data_display/medical/medical_profile_item.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../locator.dart';

class HomePage extends StatefulWidget {
  final Function goToMyProfile;

  HomePage({Key key, this.goToMyProfile});

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

class _HomePageState extends State<HomePage> {
  ToDoCountProviderModel toDoProvider;

  @override
  // void initState() {
  //   WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  //     getToDoCount();
  //   });
  //   super.initState();
  // }
  AuthenticatedUserObject authenticatedUserObject = locator<AuthenticatedUserObject>();


  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    toDoProvider = Provider.of<ToDoCountProviderModel>(context);
    return BaseView<DashboardViewModel>(
      onModelReady: (model) => model.getPatientRadOrders(),
      builder: (_, model, wi) => AppScaffold(
        isShowDecPage: false,
        body: Container(
          width: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Stack(
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Container(
                          width: double.infinity,
                          height: 100,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: ExactAssetImage(
                                    'assets/images/dq_home_page_bg_image.png'),
                                fit: BoxFit.cover),
                          ),
                          child: Stack(
                            children: <Widget>[
                              Positioned(
                                top: 15,
                                left: 5,
                                right: 5,
                                child: Container(
                                  width:
                                      MediaQuery.of(context).size.width * 0.8,
                                  child: Container(),
                                ),
                              )
                            ],
                          ),

                        ),
                        Container(width: double.infinity, height:projectViewModel.isArabic ? 120:110),
                      ],
                    ),
                    Positioned(
                      top: 40,
                      left: MediaQuery.of(context).size.width *
                          (MediaQuery.of(context).orientation ==
                                  Orientation.landscape
                              ? 0.02
                              : 0.03),
                      right: MediaQuery.of(context).size.width *
                          (MediaQuery.of(context).orientation ==
                                  Orientation.landscape
                              ? 0.02
                              : 0.03),
                      child: (!model.isLogin )
                          ? Container(
                              width: double.infinity,
                              height: 160,
                              decoration: BoxDecoration(
                                  color: Theme.of(context).primaryColor,
                                  shape: BoxShape.rectangle,
                                  border: Border.all(
                                      color: Colors.transparent, width: 0.5),
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(9)),
                                  image: DecorationImage(
                                      image: ExactAssetImage(
                                          'assets/images/bg_graphic.png'),
                                      fit: BoxFit.cover)),
                              child: Container(
                                margin: EdgeInsets.all(5),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    SizedBox(
                                      height: 8,
                                    ),
                                    Texts(
                                      TranslationBase.of(context).myMedicalFile,
                                      color: Colors.white,
                                      bold: true,
                                      fontSize: 23,
                                    ),
                                    SizedBox(
                                      height: 5,
                                    ),
                                    Texts(
                                      TranslationBase.of(context)
                                          .myMedicalFileSubTitle,
                                      color: Colors.white,
                                      fontSize: 16,
                                    ),
                                    Align(
                                      alignment: projectViewModel.isArabic
                                          ? Alignment.bottomLeft
                                          : Alignment.bottomRight,
                                      child: InkWell(
                                        onTap: () {
                                          widget.goToMyProfile();
                                        },
                                        child: Container(
                                          margin: EdgeInsets.all(2),
                                          width: MediaQuery.of(context)
                                                  .size
                                                  .width *
                                              0.30,
                                          height: 30,
                                          decoration: BoxDecoration(
                                            color: Colors.white,
                                            shape: BoxShape.rectangle,
                                            border: Border.all(
                                                color: Colors.transparent,
                                                width: 0.5),
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(4)),
                                          ),
                                          child: Center(
                                            child: Texts(
                                              TranslationBase.of(context)
                                                  .viewMore,
                                              color: Theme.of(context)
                                                  .primaryColor,
                                              fontSize: 14,

                                            ),
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            )
                          : Container(
                              width: double.infinity,
                              height: projectViewModel.isArabic ? 180 : 150,
                              decoration: BoxDecoration(
                                color: Theme.of(context).primaryColor,
                                shape: BoxShape.rectangle,
                                border: Border.all(
                                    color: Colors.transparent, width: 0.5),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(9)),
                                image: DecorationImage(
                                    image: ExactAssetImage(
                                        'assets/images/bg_graphic.png'),
                                    fit: BoxFit.cover),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Container(
                                  margin: EdgeInsets.all(5),
                                  child: Column(
                                    //  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      Row(
                                        children: <Widget>[
                                          if (model.user != null)
                                            Expanded(
                                              child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  SizedBox(
                                                    height: 8,
                                                  ),
                                                  Texts(
                                                    model.user.firstName +
                                                        " " +
                                                        model.user.lastName,
                                                    color: Colors.grey[100],
                                                    bold: true,
                                                    fontSize: 15,
                                                  ),
                                                  Texts(
                                                    '${model.user.patientID}',
                                                    color: Colors.white,
                                                    fontSize: 14,
                                                  ),
                                                  SizedBox(
                                                    height: 5,
                                                  ),
                                                  Texts(
                                                    '${DateUtil.getMonthDayYearDateFormatted(model.user.dateofBirthDataTime)} ,${model.user.genderDescription} ${model.user.ageDesc}',
                                                    color: Colors.grey[100],
                                                    fontWeight:
                                                        FontWeight.normal,
                                                    fontSize: 14,
                                                  ),
                                                ],
                                              ),
                                            ),
                                          InkWell(
                                            onTap: () {
                                              widget.goToMyProfile();
                                            },
                                            child: Container(
                                              margin: EdgeInsets.all(2),
                                              width: MediaQuery.of(context)
                                                      .size
                                                      .width *
                                                  0.30,
                                              height: 30,
                                              decoration: BoxDecoration(
                                                color: Colors.white,
                                                shape: BoxShape.rectangle,
                                                border: Border.all(
                                                    color: Colors.transparent,
                                                    width: 0.5),
                                                borderRadius: BorderRadius.all(
                                                  Radius.circular(5),
                                                ),
                                              ),
                                              child: Center(
                                                child: Texts(
                                                  TranslationBase.of(context)
                                                      .viewMore,
                                                  color: Theme.of(context)
                                                      .primaryColor,
                                                  fontSize: 12,
                                                  bold: true,
                                                ),
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                      Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.start,
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.center,
                                              children: <Widget>[
                                                Image.asset(
                                                  'assets/images/height_icon.png',
                                                  width: 30,
                                                  height: 55,
                                                ),
                                                Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  children: [
                                                    Texts(
                                                      "${model.heightCm}",
                                                      color: Colors.white,
                                                      bold: true,
                                                    ),
                                                    Texts(
                                                      TranslationBase.of(context).height,
                                                      color: Colors.white,
                                                      fontSize: 10,
                                                    ),
                                                  ],
                                                )
                                              ],
                                            ),
                                          ),
                                          SizedBox(
                                            width: 3,
                                          ),
                                          Expanded(
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.start,
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.center,
                                              children: <Widget>[
                                                Image.asset(
                                                  'assets/images/test-weight.png',
                                                  width: 30,
                                                  height: 55,
                                                ),
                                                Column(
                                                  children: [
                                                    Texts(
                                                      '${model.weightKg}',
                                                      color: Colors.white,
                                                      bold: true,
                                                    ),
                                                    Texts(
                                                      TranslationBase.of(context).weight,
                                                      color: Colors.white,
                                                      fontSize: 10,
                                                    )
                                                  ],
                                                )
                                              ],
                                            ),
                                          ),
                                          SizedBox(
                                            width: 3,
                                          ),
                                          Expanded(
                                            child: Row(
                                              mainAxisAlignment: MainAxisAlignment.start,
                                              crossAxisAlignment: CrossAxisAlignment.center,
                                              children: <Widget>[
                                                Image.asset(
                                                  'assets/images/blood-drop.png',
                                                  width: 35,
                                                  height: 40,
                                                ),
                                                Column(
                                                  children: [
                                                    Texts(
                                                      '${model.bloadType}',
                                                      color: Colors.white,
                                                    ),
                                                    Texts(
                                                      TranslationBase.of(context).bloodType,
                                                      color: Colors.white,
                                                      fontSize: 10,
                                                    )
                                                  ],
                                                )
                                              ],
                                            ),
                                          ),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ),
                    ),
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Expanded(
                        child: DashboardItem(
                          onTap: () {
                            Navigator.push(
                              context,
                              FadePage(
                                page: VitalSignDetailsScreen(),
                              ),
                            );
                          },
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Column(
                                children: <Widget>[
                                  SizedBox(height: 15,),

                                  Container(
                                    width: 60,
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        shape: BoxShape.rectangle,
                                        borderRadius: BorderRadius.circular(12)
                                    ),
                                    child: Center(child: Image.asset('assets/images/vital_sign_icon.png',
                                      width: 80,
                                      height: 50,
                                      fit: BoxFit.contain,)),
                                  ),
                                  SizedBox(height: 20,),
                                  Texts(
                                    TranslationBase.of(context)
                                        .vitalSigns,
                                    textAlign: TextAlign.center,
                                    color: Colors.white,
                                    bold: true,
                                    fontSize: projectViewModel.isArabic? SizeConfig.textMultiplier * 1.5 :SizeConfig.textMultiplier * 1.7,
                                  )
                                ],
                              ),
                            ),
                          ),
                          margin: 4,
                          height: 170,
                          imageName: 'home_healthcare_service_bg.png',
                          opacity: 1.0,
                        ),
                      ),
                      Expanded(
                        child: DashboardItem(
                          onTap: () {
                            Navigator.push(
                              context,
                              FadePage(
                                page: MedicineSearch(),
                              ),
                            );
                          },
                          opacity: 1.0,
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Column(
                                children: <Widget>[
                                  SizedBox(height: 15,),
                                  Container(
                                    width: 50,
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        shape: BoxShape.rectangle,
                                        borderRadius: BorderRadius.circular(12)
                                    ),
                                    child: Center(child: Image.asset('assets/images/search_medicine_icon.png',
                                      width: 50,
                                      height: 50,
                                      fit: BoxFit.contain,)),
                                  ),
                                  SizedBox(height: 20,),
                                  Texts(
                                    TranslationBase.of(context).searchMedicine,
                                    textAlign: TextAlign.center,
                                    color: Colors.white,
                                    bold: true,
                                    fontSize: projectViewModel.isArabic? SizeConfig.textMultiplier * 1.5 :SizeConfig.textMultiplier * 1.7,
                                  )
                                ],
                              ),
                            ),
                          ),
                          margin: 4,
                          height: 170,
                          imageName: 'al-habib_onlne_pharmacy_bg.png',
                        ),
                      ),
                      Expanded(
                        child: DashboardItem(opacity: 1.0,
                          onTap: (){
                            Navigator.push(
                              context,
                              FadePage(
                                page: PaymentService(),
                              ),
                            );
                          },
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Column(
                                children: <Widget>[
                                  SizedBox(height: 15,),
                                  Container(
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        shape: BoxShape.rectangle,
                                        borderRadius: BorderRadius.circular(12)
                                    ),
                                    child: Center(child: Image.asset('assets/images/online_payment_icon.png',
                                      width: 80,
                                      height: 50,
                                      fit: BoxFit.contain,)),
                                  ),
                                  SizedBox(height: 15,),
                                  Texts(
                                    TranslationBase.of(context).onlinePaymentService,
                                    textAlign: TextAlign.center,
                                    color: Colors.white,
                                    bold: true,
                                    fontSize: projectViewModel.isArabic? SizeConfig.textMultiplier * 1.5 :SizeConfig.textMultiplier * 1.7,
                                  )
                                ],
                              ),
                            ),
                          ),
                          margin: 4,
                          height: 170,
                          imageName: 'online_payments_bg.png',
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                Container(
                  margin: EdgeInsets.only(left: 10, right: 10),
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Expanded(
                            //flex: 1,
                            child: InkWell(
                              onTap: () {
                                Navigator.push(
                                  context,
                                  FadePage(
                                    page: MyAppointments(),
                                  ),
                                );
                              },
                              child: MedicalProfileItem(
                                title: TranslationBase.of(context)
                                    .myAppointments,
                                imagePath: 'my_appointment_icon.png',
                                subTitle: TranslationBase.of(context).myAppointmentsList,
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () => Navigator.push(context,
                                  FadePage(page: LabsHomePage())),
                              child: MedicalProfileItem(
                                title: TranslationBase.of(context).lab,
                                imagePath: 'lab_result_icon.png',
                                subTitle:
                                TranslationBase.of(context).lab,
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () => Navigator.push(context,
                                  FadePage(page: RadiologyHomePage())),
                              child: MedicalProfileItem(
                                title: TranslationBase.of(context)
                                    .radiology,
                                imagePath: 'radiology_icon.png',
                                subTitle: TranslationBase.of(context)
                                    .radiologySubtitle,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () {
                                Navigator.push(
                                  context,
                                  FadePage(
                                    page: HomePrescriptionsPage(),
                                  ),
                                );
                              },
                              child: MedicalProfileItem(
                                title: TranslationBase.of(context)
                                    .medicines,
                                imagePath: 'prescription_icon.png',
                                subTitle: TranslationBase.of(context)
                                    .medicinesSubtitle,
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () {
                                Navigator.push(
                                  context,
                                  FadePage(
                                    page: DoctorHomePage(),
                                  ),
                                );
                              },
                              child: MedicalProfileItem(
                                title: TranslationBase.of(context)
                                    .myDoctor,
                                imagePath: 'doctor_icon.png',
                                subTitle: TranslationBase.of(context)
                                    .myDoctorSubtitle,
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () {
                                Navigator.push(context,
                                    FadePage(page: InsuranceCard()));
                              },
                              child: MedicalProfileItem(
                                title: TranslationBase.of(context)
                                    .insurance,
                                imagePath: 'insurance_card_icon.png',
                                subTitle: TranslationBase.of(context)
                                    .insuranceSubtitle,
                              ),
                            ),
                          ),
                        ],
                      ),

                    ],
                  ),
                ),
                SizedBox(
                  height: 5,
                ),
                Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      DashboardItem(
                        opacity:1.0,
                        child: Container(
                          width: double.infinity,
                          padding: EdgeInsets.all(10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Texts(
                                TranslationBase.of(context).hMGService,
                                color: Colors.white,
                                bold: true,
                              ),
                              Texts(
                                TranslationBase.of(context).viewAllHabibMedicalService,
                                color: Colors.white,
                                fontWeight: FontWeight.normal,
                                fontSize: 10,
                              ),
                              Expanded(
                                child: Container(),
                              ),
                              Texts(
                                TranslationBase.of(context).viewAll,
                                color: Colors.white,
                                bold: true,
                              )
                            ],
                          ),
                        ),
                        height: 100,
                        imageName: 'ask_doctor_bg.png',
                       //color: Colors.grey[700],
                        width: MediaQuery.of(context).size.width * 0.45,
                        onTap: () => Navigator.push(
                            context, FadePage(page: AllHabibMedicalService(goToMyProfile: widget.goToMyProfile,))),
                      ),
                      DashboardItem(
                        opacity:1.0,
                        onTap: () {
                          Navigator.push(
                              context, FadePage(page: ContactUsPage()));
                        },
                        child: Container(
                          width: double.infinity,
                          padding: EdgeInsets.all(10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Texts(
                                TranslationBase.of(context).contactUs,
                                color: Colors.white,
                                bold: true,
                              ),
                              Texts(
                                TranslationBase.of(context).viewAllWaysReachUs,
                                color: Colors.white,
                                fontWeight: FontWeight.normal,
                                fontSize: SizeConfig.textMultiplier * 1.0 ,
                              ),
                              Expanded(
                                child: Container(),
                              ),
                              Texts(
                                TranslationBase.of(context).viewAll,
                                color: Colors.white,
                                bold: true,
                              )
                            ],
                          ),
                        ),
                        height: 106,
                        imageName: 'rectangle.png',
                        color: Colors.grey[700],
                        width: MediaQuery.of(context).size.width * 0.45,
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 120,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  navigateToCovidDriveThru() {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => CovidDrivethruLocation()));
  }

  getToDoCount() {
    toDoProvider.setState(0);
    ClinicListService service = new ClinicListService();
    service.getActiveAppointmentNo(context).then((res) {
      print(res['AppointmentActiveNumber']);
      if (res['MessageStatus'] == 1) {
        setState(() {
          toDoProvider.setState(res['AppointmentActiveNumber']);
        });
      } else {
        AppToast.showErrorToast(message: res['ErrorEndUserMessage']);
      }
    }).catchError((err) {
      print(err);
    });
  }
}

class DashboardItem extends StatelessWidget {
  const DashboardItem(
      {this.hasBorder = false,
      this.imageName,
      @required this.child,
      this.onTap,
      Key key,
      this.width,
      this.height,
      this.color,
      this.opacity = 1.0,this.icon,this.margin=0})
      : super(key: key);
  final bool hasBorder;
  final String imageName;
  final Widget child;
  final Function onTap;
  final double width;
  final double height;
  final Color color;
  final double opacity;
  final double margin;
  final Widget icon;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        width: width != null ? width : MediaQuery.of(context).size.width * 0.29,
        height: height != null
            ? height
            : MediaQuery.of(context).orientation == Orientation.portrait
                ? MediaQuery.of(context).size.height * 0.19
                : MediaQuery.of(context).size.height * 0.35,
        decoration: BoxDecoration(
          color: !hasBorder
              ? color != null
                  ? color
                  : Colors.black.withOpacity(opacity)
              : Colors.white,
          borderRadius: BorderRadius.circular(6.0),
          border: hasBorder
              ? Border.all(width: 1.0, color: const Color(0xffcccccc))
              : Border.all(width: 0.0, color: Colors.transparent),
          image: imageName != null
              ? DecorationImage(
                  image: ExactAssetImage('assets/images/$imageName'),
                  fit: BoxFit.cover,
                  colorFilter: new ColorFilter.mode(
                      Colors.black.withOpacity(opacity), BlendMode.dstIn),
                )
              : icon,
        ),
        margin: EdgeInsets.all(margin),
        child: Center(
          child: child,
        ),
      ),
    );
  }
}
