import 'package:doctor_app_flutter/config/size_config.dart';
import 'package:doctor_app_flutter/core/enum/viewstate.dart';
import 'package:doctor_app_flutter/core/model/patient_muse/PatientSearchRequestModel.dart';
import 'package:doctor_app_flutter/core/viewModel/authentication_view_model.dart';
import 'package:doctor_app_flutter/core/viewModel/dashboard_view_model.dart';
import 'package:doctor_app_flutter/core/viewModel/project_view_model.dart';
import 'package:doctor_app_flutter/icons_app/doctor_app_icons.dart';
import 'package:doctor_app_flutter/models/doctor/doctor_profile_model.dart';
import 'package:doctor_app_flutter/models/patient/patiant_info_model.dart';
import 'package:doctor_app_flutter/screens/base/base_view.dart';
import 'package:doctor_app_flutter/screens/home/dashboard_slider-item-widget.dart';
import 'package:doctor_app_flutter/screens/home/dashboard_swipe_widget.dart';
import 'package:doctor_app_flutter/screens/home/home_patient_card.dart';
import 'package:doctor_app_flutter/screens/live_care/live_care_patient_screen.dart';
import 'package:doctor_app_flutter/screens/medicine/medicine_search_screen.dart';
import 'package:doctor_app_flutter/screens/patients/In_patient/in_patient_screen.dart';
import 'package:doctor_app_flutter/screens/patients/out_patient/out_patient_screen.dart';
import 'package:doctor_app_flutter/screens/patients/patient_search/patient_search_screen.dart';
import 'package:doctor_app_flutter/screens/patients/profile/referral/patient_referral_screen.dart';
import 'package:doctor_app_flutter/screens/patients/register_patient/RegisterPatientPage.dart';
import 'package:doctor_app_flutter/util/date-utils.dart';
import 'package:doctor_app_flutter/util/dr_app_toast_msg.dart';
import 'package:doctor_app_flutter/util/translations_delegate_base.dart';
import 'package:doctor_app_flutter/widgets/shared/app_scaffold_widget.dart';
import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart';
import 'package:doctor_app_flutter/widgets/shared/errors/error_message.dart';
import 'package:doctor_app_flutter/widgets/shared/loader/gif_loader_dialog_utils.dart';
import 'package:doctor_app_flutter/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../routes.dart';
import 'home_screen_header.dart';
import 'label.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen({Key? key, this.title}) : super(key: key);

  final String? title;
  final String iconURL = 'assets/images/dashboard_icon/';

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

class _HomeScreenState extends State<HomeScreen> {
  bool isLoading = false;
  ProjectViewModel? projectsProvider;
  DoctorProfileModel? profile;
  bool isExpanded = false;
  bool isInpatient = false;
  int sliderActiveIndex = 0;
  String? clinicId;
  late AuthenticationViewModel authenticationViewModel;
  int colorIndex = 0;
  final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectsProvider = Provider.of<ProjectViewModel>(context);
    authenticationViewModel = Provider.of<AuthenticationViewModel>(context);

    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus) {
      currentFocus.unfocus();
    }

    return BaseView<DashboardViewModel>(
      onModelReady: (model) async {
        model.startHomeScreenServices(projectsProvider, authenticationViewModel);
      },
      builder: (_, model, w) => AppScaffold(
        baseViewModel: model,
        isShowAppBar: true,
        appBar: HomeScreenHeader(
          model: model,
          onOpenDrawer: () {
            Scaffold.of(context).openDrawer();
          },
        ),
        body: ListView(children: [
          Column(children: <Widget>[
            StickyHeader(
              header: Container(
                  color: Colors.grey[100],
                  padding: EdgeInsets.only(top: 10),
                  child: Stack(children: [
                    IconButton(
                      icon: Image.asset('assets/images/menu.png',
                          height: 50, width: 50),
                      iconSize: 18,
                      color: Colors.black,
                      onPressed: () => Scaffold.of(context).openDrawer(),
                    ),
                    Column(children: <Widget>[
                      ProfileWelcomeWidget(
                        Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Container(
                              width: MediaQuery.of(context).size.width * .6,
                              child: projectsProvider.doctorClinicsList.length >
                                      0
                                  ? Stack(
                                      children: [
                                        DropdownButtonHideUnderline(
                                            child: DropdownButton(
                                          dropdownColor: Colors.white,
                                          iconEnabledColor: Colors.black,
                                          isExpanded: true,
                                          value: clinicId == null
                                              ? projectsProvider
                                                  .doctorClinicsList[0].clinicID
                                              : clinicId,
                                          iconSize: 25,
                                          elevation: 16,
                                          selectedItemBuilder:
                                              (BuildContext context) {
                                            return projectsProvider
                                                .doctorClinicsList
                                                .map((item) {
                                              return Row(
                                                mainAxisSize: MainAxisSize.max,
                                                mainAxisAlignment:
                                                    MainAxisAlignment.end,
                                                children: <Widget>[
                                                  Column(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .center,
                                                    children: [
                                                      Container(
                                                          padding:
                                                              EdgeInsets.all(2),
                                                          margin:
                                                              EdgeInsets.all(2),
                                                          decoration:
                                                              new BoxDecoration(
                                                            color:
                                                                Colors.red[800],
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        20),
                                                          ),
                                                          constraints:
                                                              BoxConstraints(
                                                            minWidth: 20,
                                                            minHeight: 20,
                                                          ),
                                                          child: Center(
                                                            child: AppText(
                                                              projectsProvider
                                                                  .doctorClinicsList
                                                                  .length
                                                                  .toString(),
                                                              color:
                                                                  Colors.white,
                                                              fontSize:
                                                                  projectsProvider
                                                                          .isArabic
                                                                      ? 10
                                                                      : 11,
                                                              textAlign:
                                                                  TextAlign
                                                                      .center,
                                                            ),
                                                          )),
                                                    ],
                                                  ),
                                                  AppText(item.clinicName,
                                                      fontSize: 12,
                                                      color: Colors.black,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      textAlign: TextAlign.end),
                                                ],
                                              );
                                            }).toList();
                                          },
                                          onChanged: (newValue) async {
                                            clinicId = newValue;
                                            GifLoaderDialogUtils.showMyDialog(
                                                context);
                                            await model.changeClinic(newValue,
                                                authenticationViewModel);
                                            GifLoaderDialogUtils.hideDialog(
                                                context);
                                            if (model.state ==
                                                ViewState.ErrorLocal) {
                                              DrAppToastMsg.showErrorToast(
                                                  model.error);
                                            }
                                          },
                                          items: projectsProvider
                                              .doctorClinicsList
                                              .map((item) {
                                            return DropdownMenuItem(
                                              child: AppText(
                                                item.clinicName,
                                                textAlign: TextAlign.left,
                                              ),
                                              value: item.clinicID,
                                            );
                                          }).toList(),
                                        )),
                                      ],
                                    )
                                  : AppText(
                                      TranslationBase.of(context).noClinic),
                            ),
                          ],
                        ),
                        isClinic: true,
                        height: 50,
                      ),
                    ])
                  ])),
              content: Column(
                children: [
                  if (model.state != ViewState.ErrorLocal)
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        model.dashboardItemsList.length > 0
                            ? DashboardSwipeWidget(
                                model.dashboardItemsList,
                                model,
                                (sliderIndex) {
                                  setState(() {
                                    sliderActiveIndex = sliderIndex;
                                  });
                                },
                              )
                            : SizedBox(),
                        model.dashboardItemsList.length > 0
                            ? FractionallySizedBox(
                                widthFactor: 0.90,
                                child: Container(
                                    child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: <Widget>[
                                      SizedBox(
                                        height: 10,
                                      ),
                                      sliderActiveIndex == 1
                                          ? DashboardSliderItemWidget(
                                              model.dashboardItemsList[4])
                                          : sliderActiveIndex == 0
                                              ? DashboardSliderItemWidget(
                                                  model.dashboardItemsList[3])
                                              : DashboardSliderItemWidget(
                                                  model.dashboardItemsList[6]),
                                    ])))
                            : SizedBox(),
                      ],
                    )
                  else
                    Container(
                        child: ErrorMessage(
                      error: model.error,
                    )),
                  FractionallySizedBox(
                    // widthFactor: 0.90,
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(50),
                          )),
                      padding: EdgeInsets.only(left: 20, top: 10, right: 20),
                      margin: EdgeInsets.only(top: 10),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(
                            height: 10,
                          ),
                          Container(
                              child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              AppText(
                                TranslationBase.of(context).patients,
                                fontSize: 12,
                                fontWeight: FontWeight.bold,
                                fontHeight: .5,
                              ),
                              AppText(
                                TranslationBase.of(context).services,
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                              ),
                            ],
                          )),
                          SizedBox(
                            height: 10,
                          ),
                          Container(
                              height: 120,
                              child: ListView(
                                  scrollDirection: Axis.horizontal,
                                  children: [
                                    ...homePatientsCardsWidget(
                                        model, projectsProvider),
                                  ])),
                          SizedBox(
                            height: 20,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            )
          ]),
        ]),
      ),
    );
  }

  List<Widget> homePatientsCardsWidget(
      DashboardViewModel model, projectsProvider) {
    colorIndex = 0;

    // List<Color> backgroundColors = List(3);
    // backgroundColors[0] = Color(0xffD02127);
    // backgroundColors[1] = Colors.grey[300];
    // backgroundColors[2] = Color(0xff2B353E);
    // List<Color> backgroundIconColors = List(3);
    // backgroundIconColors[0] = Colors.white12;
    // backgroundIconColors[1] = Colors.white38;
    // backgroundIconColors[2] = Colors.white10;
    // List<Color> textColors = List(3);
    // textColors[0] = Colors.white;
    // textColors[1] = Color(0xFF353E47);
    // textColors[2] = Colors.white;
    //
    // List<HomePatientCard> patientCards = [];
    //

    List<Color> backgroundColors = [];
    backgroundColors.add(Color(0xffD02127));
    backgroundColors.add(Colors.grey[300]!);
    backgroundColors.add(Color(0xff2B353E));

    List<Color> backgroundIconColors = [];
    backgroundIconColors.add(Colors.white12);
    backgroundIconColors.add(Colors.white38);
    backgroundIconColors.add(Colors.white10);

    List<Color> textColors = [];
    textColors.add(Colors.white);
    textColors.add(Colors.black);
    textColors.add(Colors.white);
    List<HomePatientCard> patientCards = [];
    if (model.hasVirtualClinic) {
      patientCards.add(HomePatientCard(
        backgroundColor: backgroundColors[colorIndex],
        backgroundIconColor: backgroundIconColors[colorIndex],
        cardIcon: DoctorApp.livecare,
        textColor: textColors[colorIndex],
        iconSize: 21,
        text: "${TranslationBase.of(context).liveCare}\n${TranslationBase.of(context).patients}",
        onTap: () {
          // TODO MOSA TEST
          // PatiantInformtion patient = PatiantInformtion(
          //   patientStatusType: 43,
          //   episodeNo: 0,
          //   vcId: 42342,
          //   fullName: "mosa test",
          //   dateofBirth: "2000-05-01 10:42:35.790004"
          // );
          // Navigator.of(context).pushNamed(PATIENTS_PROFILE, arguments: {
          //   "patient": patient,
          //   "patientType": "0",
          //   "isSearch": false,
          //   "isInpatient": false,
          //   "arrivalType": "0",
          //   "isSearchAndOut": false,
          //   "isFromLiveCare": true,
          // });
          Navigator.push(
            context,
            FadePage(
              page: LiveCarePatientScreen(),
            ),
          );
        },
      ));
      changeColorIndex();
    }

    patientCards.add(HomePatientCard(
      backgroundColor: backgroundColors[colorIndex],
      backgroundIconColor: backgroundIconColors[colorIndex],
      cardIcon: DoctorApp.inpatient,
      textColor: textColors[colorIndex],
      text: TranslationBase.of(context).myInPatient!,
      onTap: () {
        Navigator.push(
          context,
          FadePage(
            page: InPatientScreen(
              specialClinic: model.getSpecialClinic(clinicId ?? projectsProvider!.doctorClinicsList[0]!.clinicID!),
            ),
          ),
        );
      },
    ));
    changeColorIndex();

    patientCards.add(HomePatientCard(
      backgroundColor: backgroundColors[colorIndex],
      backgroundIconColor: backgroundIconColors[colorIndex],
      //TODO Elham* match the of the icon
      cardIcon: DoctorApp.arrival_patients,
      textColor: textColors[colorIndex],
      text: TranslationBase.of(context).registerNewPatient,
      onTap: () {
        Navigator.push(
          context,
          FadePage(
            page: RegisterPatientPage(),
          ),
        );
      },
    ));
    changeColorIndex();

    patientCards.add(HomePatientCard(
      backgroundColor: backgroundColors[colorIndex],
      backgroundIconColor: backgroundIconColors[colorIndex],
      cardIcon: DoctorApp.arrival_patients,
      textColor: textColors[colorIndex],
      text: TranslationBase.of(context).myOutPatient_2lines!,
      onTap: () {
        String date = AppDateUtils.convertDateToFormat(
            DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day), 'yyyy-MM-dd');

        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => OutPatientsScreen(
                  patientSearchRequestModel: PatientSearchRequestModel(
                      from: date, to: date, doctorID: authenticationViewModel.doctorProfile!.doctorID),
              ),
              settings: RouteSettings(name: 'OutPatientsScreen'),
            ));
      },
    ));
    changeColorIndex();

    patientCards.add(HomePatientCard(
      backgroundColor: backgroundColors[colorIndex],
      backgroundIconColor: backgroundIconColors[colorIndex],
      cardIcon: DoctorApp.referral_1,
      textColor: textColors[colorIndex],
      text: TranslationBase.of(context).myPatientsReferral!,
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => PatientReferralScreen(),
            settings: RouteSettings(name: 'PatientReferralScreen'),
          ),
        );
      },
    ));
    changeColorIndex();

    patientCards.add(HomePatientCard(
      backgroundColor: backgroundColors[colorIndex],
      backgroundIconColor: backgroundIconColors[colorIndex],
      cardIcon: DoctorApp.search,
      textColor: textColors[colorIndex],
      text: TranslationBase.of(context).searchPatientDashBoard!,
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => PatientSearchScreen(),
              settings: RouteSettings(name: 'PatientSearchScreen'),
            ));
      },
    ));
    changeColorIndex();

    patientCards.add(HomePatientCard(
      backgroundColor: backgroundColors[colorIndex],
      backgroundIconColor: backgroundIconColors[colorIndex],
      cardIcon: DoctorApp.search_medicines,
      textColor: textColors[colorIndex],
      text: TranslationBase.of(context).searchMedicineDashboard!,
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => MedicineSearchScreen(),
              settings: RouteSettings(name: 'MedicineSearchScreen'),
            ));
      },
    ));
    changeColorIndex();

    return [...List.generate(patientCards.length, (index) => patientCards[index]).toList()];
  }

  changeColorIndex() {
    colorIndex++;
    if (colorIndex > 2) {
      colorIndex = 0;
    }
  }
}
