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/pages/AlHabibMedicalService/HomeHealthCare/home_health_care_index_page.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/all_habib_medical_service_page.dart';
import 'package:diplomaticquarterapp/pages/ContactUs/hmg_service.dart';
import 'package:diplomaticquarterapp/pages/ErService/ErOptions.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/feedback/feedback_home_page.dart';
import 'package:diplomaticquarterapp/pages/paymentService/payment_service.dart';
import 'package:diplomaticquarterapp/uitl/date_uitl.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/pages/livecare/livecare_home.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:hexcolor/hexcolor.dart';
import 'package:provider/provider.dart';

class HomePage extends StatefulWidget {
  final Function goToMyProfile;

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    return BaseView<DashboardViewModel>(
      onModelReady: (model) => model.getPatientRadOrders(),
      builder: (_, model, wi) => AppScaffold(
        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: 210,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: ExactAssetImage(
                                    'assets/images/dashboard_top_bg.png'),
                                fit: BoxFit.cover),
                          ),
                          child: Stack(
                            children: <Widget>[
                              Positioned(
                                top: 30,
                                left: 15,
                                right: 15,
                                child: Container(
                                  width:
                                      MediaQuery.of(context).size.width * 0.8,
                                  child: Row(
                                    children: <Widget>[
                                      Expanded(
                                        child: InkWell(
                                          onTap: () => Navigator.push(context,
                                              FadePage(page: LiveCareHome())),
                                          child: Container(
                                            height: 110,
                                            padding: EdgeInsets.all(15),
                                            margin: EdgeInsets.all(5),
                                            decoration: BoxDecoration(
                                                color: Colors.white
                                                    .withOpacity(0.3),
                                                borderRadius: BorderRadius.all(
                                                    Radius.circular(5))),
                                            child: Image.asset(
                                              'assets/images/livecare_white_logo.png',
                                            ),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: Container(
                                          height: 110,
                                          padding: EdgeInsets.all(15),
                                          margin: EdgeInsets.all(5),
                                          decoration: BoxDecoration(
                                              color:
                                                  Colors.white.withOpacity(0.3),
                                              borderRadius: BorderRadius.all(
                                                  Radius.circular(5))),
                                          // child: Image.asset('assets/images/livecare_white_logo.png',),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(width: double.infinity, height: 80)
                      ],
                    ),
                    Positioned(
                      top: 155,
                      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 && projectViewModel.user == null)
                          ? Container(
                              width: double.infinity,
                              height: 125,
                              decoration: BoxDecoration(
                                  color: Hexcolor('#A59E9E'),
                                  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.black87,
                                      bold: true,
                                      fontSize: 23,
                                    ),
                                    SizedBox(
                                      height: 5,
                                    ),
                                    Texts(
                                      TranslationBase.of(context)
                                          .myMedicalFileSubTitle,
                                      color: Colors.black,
                                      fontSize: 16,
                                    ),
                                    Align(
                                      alignment: projectViewModel.isArabic
                                          ? Alignment.bottomRight
                                          : Alignment.bottomLeft,
                                      child: InkWell(
                                        onTap: () {
                                          widget.goToMyProfile();
                                        },
                                        child: Container(
                                          margin: EdgeInsets.all(2),
                                          width: 90,
                                          height: 30,
                                          decoration: BoxDecoration(
                                            color: Hexcolor('#D81A2E'),
                                            shape: BoxShape.rectangle,
                                            border: Border.all(
                                                color: Colors.transparent,
                                                width: 0.5),
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(9)),
                                          ),
                                          child: Center(
                                            child: Texts(
                                              TranslationBase.of(context)
                                                  .viewMore,
                                              color: Colors.white,
                                              fontSize: 12,
                                            ),
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            )
                          : Container(
                              width: double.infinity,
                              height: 130,
                              decoration: BoxDecoration(
                                color: Hexcolor('#A59E9E'),
                                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(
                                  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: 90,
                                            height: 30,
                                            decoration: BoxDecoration(
                                              color: Hexcolor('#D81A2E'),
                                              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: Colors.white,
                                                fontSize: 12,
                                              ),
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                    Row(
                                      //crossAxisAlignment: CrossAxisAlignment.center,
                                      //mainAxisAlignment: MainAxisAlignment.spaceAround,
                                      children: <Widget>[
                                        Expanded(
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: <Widget>[
                                              Image.asset(
                                                'assets/images/height_icon.png',
                                                width: 35,
                                                height: 40,
                                              ),
                                              Texts(
                                                "${model.heightCm}",
                                                color: Colors.white,
                                              )
                                            ],
                                          ),
                                        ),
                                        SizedBox(
                                          width: 3,
                                        ),
                                        Expanded(
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: <Widget>[
                                              Image.asset(
                                                'assets/images/weight_icon.png',
                                                width: 25,
                                                height: 40,
                                              ),
                                              Texts(
                                                '${model.weightKg}',
                                                color: Colors.white,
                                              )
                                            ],
                                          ),
                                        ),
                                        SizedBox(
                                          width: 3,
                                        ),
                                        Expanded(
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: <Widget>[
                                              Image.asset(
                                                'assets/images/blood_icon.png',
                                                width: 35,
                                                height: 40,
                                              ),
                                              Texts(
                                                '${model.bloadType}',
                                                color: Colors.white,
                                              )
                                            ],
                                          ),
                                        ),
                                      ],
                                    )
                                  ],
                                ),
                              ),
                            ),
                    ),
                  ],
                ),
                InkWell(
                  onTap: (){
                    Navigator.push(
                      context,
                      FadePage(
                        page: HomeHealthCareIndexPage(),
                      ),
                    );
                  },
                  child: Container(
                    margin: EdgeInsets.only(left: 15, right: 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        DashboardItem(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Column(
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/Dr_Schedule_report.png',
                                    width: 50,
                                    height: 50,
                                  ),
                                  SizedBox(
                                    height: 13.5,
                                  ),
                                  Texts(
                                    TranslationBase.of(context)
                                        .homeHealthCareService,
                                    textAlign: TextAlign.center,
                                    color: Colors.white,
                                    bold: true,
                                    fontSize: SizeConfig.textMultiplier * 1.7,
                                  )
                                ],
                              ),
                            ),
                          ),
                          height: MediaQuery.of(context).size.width * 0.4,
                          imageName: 'home_healthcare_service_bg.png',
                          opacity: 0.5,
                        ),
                        DashboardItem(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Column(
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/pharmacy_logo.png',
                                    width: 40,
                                    height: 40,
                                  ),
                                  SizedBox(
                                    height: 20,
                                  ),
                                  Texts(
                                    TranslationBase.of(context).onlinePharmacy,
                                    textAlign: TextAlign.center,
                                    color: Colors.white,
                                    bold: true,
                                    fontSize: SizeConfig.textMultiplier * 2.0,
                                  )
                                ],
                              ),
                            ),
                          ),
                          height: MediaQuery.of(context).size.width * 0.4,
                          imageName: 'al-habib_onlne_pharmacy_bg.png',
                        ),
                        DashboardItem(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Column(
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/comprehensive_medical_checkup_logo.png',
                                    width: 50,
                                    height: 50,
                                  ),
                                  SizedBox(
                                    height: 15,
                                  ),
                                  Texts(
                                    TranslationBase.of(context).emergencyService,
                                    textAlign: TextAlign.center,
                                    color: Colors.white,
                                    bold: true,
                                    fontSize: SizeConfig.textMultiplier * 2.0,
                                  )
                                ],
                              ),
                            ),
                          ),
                          height: MediaQuery.of(context).size.width * 0.4,
                          color: Hexcolor("#747C80"),
                          imageName: 'emergency_service_image.png',
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                InkWell(
                  onTap: () =>
                      Navigator.push(context, FadePage(page: PaymentService())),
                  child: Container(
                    margin: EdgeInsets.only(left: 15, right: 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          width: MediaQuery.of(context).size.width * 0.29,
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Column(
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/al-habib_online_payment_service_icon.png',
                                    height: 55,
                                  ),
                                  SizedBox(
                                    height: 15,
                                  ),
                                  Texts(
                                    TranslationBase.of(context)
                                        .onlinePaymentService,
                                    textAlign: TextAlign.center,
                                    color: Colors.black87,
                                    bold: false,
                                    fontSize: SizeConfig.textMultiplier * 2,
                                  )
                                ],
                              ),
                            ),
                          ),
                          height: MediaQuery.of(context).size.width * 0.4,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6.0),
                            color: Colors.white,
                          ),
                        ),
                        Container(
                            child: Center(
                              child: Padding(
                                padding: const EdgeInsets.all(15.0),
                                child: Column(
                                  children: <Widget>[
                                    Image.asset(
                                      'assets/images/ereferral_service_icon.png',
                                      width: 50,
                                      height: 55,
                                    ),
                                    SizedBox(
                                      height: 15,
                                    ),
                                    Texts(
                                      TranslationBase.of(context)
                                          .offersAndPackages,
                                      textAlign: TextAlign.center,
                                      color: Colors.black87,
                                      bold: false,
                                      fontSize: SizeConfig.textMultiplier * 2,
                                    )
                                  ],
                                ),
                              ),
                            ),
                            width: MediaQuery.of(context).size.width * 0.29,
                            height: MediaQuery.of(context).size.width * 0.4,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6.0),
                              color: Colors.white,
                            )),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.29,
                          child: InkWell(
                            onTap: () => Navigator.push(
                                context,
                                FadePage(
                                    page: ErOptions(
                                  isAppbar: true,
                                ))),
                            child: Center(
                              child: Padding(
                                padding: const EdgeInsets.all(15.0),
                                child: Column(
                                  children: <Widget>[
                                    Image.asset(
                                      'assets/images/Dr_Schedule_report.png',
                                      width: 50,
                                      height: 50,
                                    ),
                                    SizedBox(
                                      height: 15,
                                    ),
                                    Texts(
                                      TranslationBase.of(context)
                                          .emergencyServices,
                                      textAlign: TextAlign.center,
                                      color: Colors.black87,
                                      bold: false,
                                      fontSize: SizeConfig.textMultiplier * 2.0,
                                    )
                                  ],
                                ),
                              ),
                            ),
                          ),
                          height: MediaQuery.of(context).size.width * 0.4,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6.0),
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      DashboardItem(
                        child: Container(
                          width: double.infinity,
                          padding: EdgeInsets.all(10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Texts(
                                TranslationBase.of(context).hMGService,
                                color: Colors.white,
                                fontWeight: FontWeight.normal,
                              ),
                              Texts(
                                TranslationBase.of(context)
                                    .viewAllHabibMedicalService,
                                color: Colors.white,
                                fontWeight: FontWeight.normal,
                                fontSize: 10,
                              ),
                              Expanded(
                                child: Container(),
                              ),
                              Texts(
                                TranslationBase.of(context).viewMore,
                                color: Colors.white,
                                //fontWeight: FontWeight.normal,
                              )
                            ],
                          ),
                        ),
                        height: 100,
                        imageName: 'hmg_services_bg .png',
                        opacity: 0.5,
                        color: Colors.grey[700],
                        width: MediaQuery.of(context).size.width * 0.45,
                        onTap: () => Navigator.push(
                            context, FadePage(page: AllHabibMedicalService())),
                      ),
                      DashboardItem(
                        onTap: () {
                          // Navigator.push(
                          //     context, FadePage(page: FeedbackHomePage()));
                          Navigator.push(
                              context, FadePage(page: HmgServicePage()));
                        },
                        child: Container(
                          width: double.infinity,
                          padding: EdgeInsets.all(10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Texts(
                                TranslationBase.of(context).contactUs,
                                color: Colors.white,
                                fontWeight: FontWeight.normal,
                              ),
                              Texts(
                                TranslationBase.of(context).viewAllWaysReachUs,
                                color: Colors.white,
                                fontWeight: FontWeight.normal,
                                fontSize: 10,
                              ),
                              Expanded(
                                child: Container(),
                              ),
                              Texts(
                                TranslationBase.of(context).viewMore,
                                color: Colors.white,
                                fontWeight: FontWeight.normal,
                              )
                            ],
                          ),
                        ),
                        height: 100,
                        imageName: 'contact_us_bg.png',
                        opacity: 0.5,
                        color: Colors.grey[700],
                        width: MediaQuery.of(context).size.width * 0.45,
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 80,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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 = 0.4})
      : 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;

  @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 : Hexcolor('#050705').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: AssetImage('assets/images/$imageName'),
                  fit: BoxFit.cover,
                  colorFilter: new ColorFilter.mode(
                      Colors.black.withOpacity(0.2), BlendMode.dstIn),
                )
              : null,
        ),
        child: Center(
          child: child,
        ),
      ),
    );
  }
}
