import 'package:badges/badges.dart';
import 'package:diplomaticquarterapp/core/viewModels/medical/medical_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/models/Appointments/toDoCountProviderModel.dart';
import 'package:diplomaticquarterapp/pages/MyAppointments/MyAppointments.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/insurance/insurance_approval_screen.dart';
import 'package:diplomaticquarterapp/pages/insurance/insurance_card_screen.dart';
import 'package:diplomaticquarterapp/pages/medical/patient_sick_leave_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/reports/report_home_page.dart';
import 'package:diplomaticquarterapp/services/authentication/auth_provider.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/medical/time_line_widget.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 'allergies_page.dart';
import 'doctor/doctor_home_page.dart';
import 'labs/labs_home_page.dart';

class MedicalProfilePage extends StatefulWidget {
  @override
  _MedicalProfilePageState createState() => _MedicalProfilePageState();
}

class _MedicalProfilePageState extends State<MedicalProfilePage> {
  var authProvider = new AuthProvider();

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    var appoCountProvider = Provider.of<ToDoCountProviderModel>(context);
    return BaseView<MedicalViewModel>(
      onModelReady: (model) => model.getAppointmentHistory(),
      builder: (_, model, widget) => AppScaffold(
        isShowDecPage: false,
        baseViewModel: model,
        body: Container(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Stack(
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Container(
                          width: double.infinity,
                          height: 210,
                          child: Stack(
                            children: <Widget>[
                              Image.asset(
                                'assets/images/timeline_bg.png',
                                fit: BoxFit.cover,
                                width: double.infinity,
                                //  color:  Colors.black.withOpacity(0.0)
                              ),
                              if (model.isLogin)
                                ListView.builder(
                                  itemBuilder: (context, index) =>
                                      TimeLineWidget(
                                    isUp: index % 2 == 1,
                                    appoitmentAllHistoryResul: model
                                        .appoitmentAllHistoryResultList[index],
                                  ),
                                  itemCount: model
                                      .appoitmentAllHistoryResultList.length,
                                  scrollDirection: Axis.horizontal,
                                  reverse: !projectViewModel.isArabic,
                                ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(vertical: 5.0),
                          child: Column(
                            children: <Widget>[
                              if(model.isLogin)
                              Container(
                                width: double.infinity,
                                height: 55,
                              ),
                              Row(
                                children: <Widget>[
                                  Expanded(
                                    flex: 1,
                                    child: InkWell(
                                      onTap: () {
                                        Navigator.push(
                                          context,
                                          FadePage(
                                            page: MyAppointments(),
                                          ),
                                        );
                                      },
                                      child: authProvider.isLogin
                                          ? Stack(children: [
                                              MedicalProfileItem(
                                                title:
                                                    TranslationBase.of(context)
                                                        .myAppointments,
                                                imagePath:
                                                    'my_appointment_icon.png',
                                                subTitle:
                                                    TranslationBase.of(context)
                                                        .myAppointmentsList,
                                                hasBadge: true,
                                              ),
                                              Positioned(
                                                right: 0.0,
                                                child: Badge(
                                                  toAnimate: false,
                                                  position:
                                                      BadgePosition.topEnd(),
                                                  shape: BadgeShape.circle,
                                                  badgeColor: Color(0xFF40ACC9)
                                                      .withOpacity(1.0),
                                                  borderRadius:
                                                      BorderRadius.circular(8),
                                                  badgeContent: Container(
                                                    padding:
                                                        EdgeInsets.all(2.0),
                                                    child: Text(
                                                        appoCountProvider.count
                                                            .toString(),
                                                        style: TextStyle(
                                                            color: Colors.white,
                                                            fontSize: 16.0)),
                                                  ),
                                                ),
                                              ),
                                            ])
                                          : MedicalProfileItem(
                                              title: TranslationBase.of(context)
                                                  .myAppointments,
                                              imagePath:
                                                  'my_appointment_icon.png',
                                              subTitle:
                                                  TranslationBase.of(context)
                                                      .myAppointmentsList,
                                              hasBadge: true,
                                            ),
                                    ),
                                  ),
                                  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).labSubtitle,
                                      ),
                                    ),
                                  ),
                                  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: 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: 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: InsuranceCard()));
                                      },
                                      child: MedicalProfileItem(
                                        title: TranslationBase.of(context)
                                            .insurance,
                                        imagePath: 'insurance_card_icon.png',
                                        subTitle: TranslationBase.of(context)
                                            .insuranceSubtitle,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Row(
                                children: <Widget>[
                                  Expanded(
                                    flex: 1,
                                    child: InkWell(
                                      onTap: () => Navigator.push(context,
                                          FadePage(page: AllergiesPage())),
                                      child: MedicalProfileItem(
                                        title: TranslationBase.of(context)
                                            .allergies,
                                        imagePath: 'my_allergies_icon.png',
                                        subTitle: TranslationBase.of(context)
                                            .allergiesSubtitle,
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    flex: 1,
                                    child: InkWell(
                                      onTap: () {
                                        Navigator.push(
                                            context,
                                            FadePage(
                                                page: PatientSickLeavePage()));
                                      },
                                      child: MedicalProfileItem(
                                        title: TranslationBase.of(context).sick,
                                        imagePath: 'sick_leaves_icons.png',
                                        subTitle: TranslationBase.of(context)
                                            .sickSubtitle,
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    flex: 1,
                                    child: InkWell(
                                      onTap: () {
                                        Navigator.push(
                                            context,
                                            FadePage(
                                                page: InsuranceApproval()));
                                      },
                                      child: MedicalProfileItem(
                                        title: TranslationBase.of(context)
                                            .insuranceApproval,
                                        imagePath:
                                            'insurance_approvals_icon.png',
                                        subTitle: TranslationBase.of(context)
                                            .insuranceApprovalSubtitle,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Row(children: <Widget>[
                                Expanded(
                                  flex: 1,
                                  child: InkWell(
                                    onTap: () {
                                      Navigator.push(context,
                                          FadePage(page: HomeReportPage()));
                                    },
                                    child: MedicalProfileItem(
                                      title:
                                          TranslationBase.of(context).medical,
                                      imagePath: 'medical_reports_icon.png',
                                      subTitle: TranslationBase.of(context)
                                          .medicalSubtitle,
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: Container(),
                                ),
                                Expanded(
                                  child: Container(),
                                ),
                              ]),
                              SizedBox(
                                height:
                                    MediaQuery.of(context).size.height * 0.12,
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                    if (model.user != null && model.isLogin)
                      Positioned(
                        top: 185,
                        left: 20,
                        right: 20,
                        child: Container(
                          width: double.infinity,
                          height: 80,
                          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: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: <Widget>[
                              SizedBox(
                                height: 8,
                              ),
                              Texts(
                                model.user.firstName +
                                    " " +
                                    model.user.lastName,
                                color: Colors.white,
                                bold: true,
                              ),
                              Texts(
                                '${model.user.patientID}',
                                color: Colors.white,
                              ),
                            ],
                          ),
                        ),
                      ),
                    Positioned(
                      top: 2,
                      left: projectViewModel.isArabic ? 0 : 10,
                      right: projectViewModel.isArabic ? 10 : 0,
                      child: Texts(
                        TranslationBase.of(context).timeLine,
                        color: Colors.white,
                        fontSize: 14,
                        fontWeight: FontWeight.normal,
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
