import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/core/model/AlHabibMedicalService/EReferral/create_e_referral_request_model.dart';
import 'package:diplomaticquarterapp/core/model/AlHabibMedicalService/EReferral/get_all_cities_response_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/all_habib_medical_services/e_referral_view_model.dart';
import 'package:diplomaticquarterapp/models/Authentication/authenticated_user.dart';
import 'package:diplomaticquarterapp/models/FamilyFiles/GetAllSharedRecordByStatusResponse.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/app_shared_preferences.dart';
import 'package:diplomaticquarterapp/widgets/bottom_options/BottomSheet.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import '../dialogs/select_city_dialog.dart';

class NewEReferralStepThreePage extends StatefulWidget {
  final CreateEReferralRequestModel createEReferralRequestModel;
  final Function changePageViewIndex;

  const NewEReferralStepThreePage(
      {Key key, this.createEReferralRequestModel, this.changePageViewIndex})
      : super(key: key);

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

class _NewEReferralStepThreePageState extends State<NewEReferralStepThreePage> {
  TextEditingController _nameTextController = TextEditingController();
  TextEditingController _mobileTextController = TextEditingController();
  GetAllCitiesResponseModel _selectedCity;

  GetAllSharedRecordsByStatusList selectedPatientFamily;
  List<EReferralAttachment> medicalReportImages = [];
  List<EReferralAttachment> insuredPatientImages = [];

  bool isPatientInsured = false;
  AppSharedPreferences sharedPref = AppSharedPreferences();
  AuthenticatedUser authUser;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BaseView<EReferralViewModel>(
        builder: (_, model, widget) => AppScaffold(
            isShowAppBar: false,
            body: SingleChildScrollView(
              physics: ScrollPhysics(),
              child: Container(
                margin: EdgeInsets.all(12),
                child: Center(
                  child: FractionallySizedBox(
                    widthFactor: 0.94,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(
                          height: 20,
                        ),
                        Center(
                          child: Texts(
//                        TranslationBase.of(context).advancePaymentLabel,
                            "Other details",
                            textAlign: TextAlign.center,
                          ),
                        ),
                        SizedBox(
                          height: 12,
                        ),
                        Container(
                          padding: EdgeInsets.only(top: 10),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            color: Colors.white,
                          ),
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 9),
                                    child: Texts(
                                      "Medical Report",
                                      color: Colors.grey,
                                      fontSize: 17,
                                    ),
                                  ),
                                ],
                              ),
                              InkWell(
                                onTap: () {
                                  ImageOptions.showImageOptions(context,
                                      (String image) {
                                    setState(() {
                                      EReferralAttachment eReferralAttachment = new EReferralAttachment(fileName: 'image ${ medicalReportImages.length +1}.png',base64String: image );
                                      medicalReportImages.add(eReferralAttachment);
                                    });
                                  });
                                },
                                child: Container(
                                  margin: EdgeInsets.only(
                                      left: 10, right: 10, top: 15),
                                  height: 50,
                                  decoration: BoxDecoration(
                                    border: Border.all(color: Colors.grey),
                                    borderRadius: BorderRadius.circular(7),
                                    color: Colors.white,
                                    shape: BoxShape.rectangle,
                                  ),
                                  child: Center(
                                    child: Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Icon(Icons.attach_file),
                                        Texts(
                                          'selected attachment',
                                          variant: 'bodyText',
                                          textAlign: TextAlign.center,
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 12,
                              ),
                              ...List.generate(
                                  medicalReportImages.length,
                                  (index) => Container(
                                        margin: EdgeInsets.all(10),
                                        padding: EdgeInsets.all(8.0),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: <Widget>[
                                            Row(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: <Widget>[
                                                Icon(
                                                    FontAwesomeIcons.paperclip),
                                                SizedBox(
                                                  width: 8,
                                                ),
                                                Texts(
                                                  medicalReportImages[index].fileName,
                                                ),
                                              ],
                                            ),
                                            InkWell(
                                                onTap: () {
                                                  setState(() {
                                                    medicalReportImages
                                                        .remove(medicalReportImages[index]);
                                                  });
                                                },
                                                child: Icon(
                                                  FontAwesomeIcons.trashAlt,
                                                  color: Colors.red[300],
                                                ))
                                          ],
                                        ),
                                      )),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 12,
                        ),
                        Container(
                          padding: EdgeInsets.only(top: 10),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12),
                              color: Colors.white),
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 9),
                                    child: Texts(
                                      "Preferred Branch",
                                      color: Colors.grey,
                                      fontSize: 17,
                                    ),
                                  ),
                                ],
                              ),
                              InkWell(
                                onTap: () =>
                                    confirmSelectCityDialog(model.allCities),
                                child: Container(
                                  padding: EdgeInsets.all(12),
                                  width: double.infinity,
                                  height: 65,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(12),
                                      color: Colors.white),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Texts(getRelationName()),
                                      Icon(Icons.arrow_drop_down)
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 12,
                        ),
                        Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12),
                              color: Colors.white),
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Row(
                                    children: [
                                      Checkbox(
                                          value: isPatientInsured,
                                          activeColor: Colors.black38,
                                          onChanged: (bool newValue) {
                                            setState(() {
                                              isPatientInsured = newValue;
                                            });
                                          }),
                                      Padding(
                                        padding: const EdgeInsets.all(20.0),
                                        child: Texts(
                                          "Insured Patient",
                                          fontSize: 17,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                        if(isPatientInsured)
                        SizedBox(
                          height: 12,
                        ),
                        Opacity(
                          opacity: isPatientInsured?1:0,
                          child: Container(
                            padding: EdgeInsets.only(top: 10),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12),
                              color: Colors.white,
                            ),
                            child: Column(
                              children: [

                                InkWell(
                                  onTap: () {
                                    ImageOptions.showImageOptions(context,
                                        (String image) {
                                      setState(() {

                                        EReferralAttachment eReferralAttachment = new EReferralAttachment(fileName: 'image ${ medicalReportImages.length +1}.png',base64String: image );

                                        insuredPatientImages=[eReferralAttachment];
                                      });
                                    });
                                  },
                                  child: Container(
                                    margin: EdgeInsets.only(
                                        left: 10, right: 10, top: 15),
                                    height: 50,
                                    decoration: BoxDecoration(
                                      border: Border.all(color: Colors.grey),
                                      borderRadius: BorderRadius.circular(7),
                                      color: Colors.white,
                                      shape: BoxShape.rectangle,
                                    ),
                                    child: Center(
                                      child: Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: <Widget>[
                                          Icon(Icons.attach_file),
                                          Texts(
                                            'selected attachment',
                                            variant: 'bodyText',
                                            textAlign: TextAlign.center,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                SizedBox(
                                  height: 12,
                                ),
                                ...List.generate(
                                    insuredPatientImages.length,
                                    (index) => Container(
                                          margin: EdgeInsets.all(10),
                                          padding: EdgeInsets.all(8.0),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: <Widget>[
                                              Row(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Icon(
                                                      FontAwesomeIcons.paperclip),
                                                  SizedBox(
                                                    width: 8,
                                                  ),
                                                  Texts(
                                                    'image ${index + 1}.png',
                                                  ),
                                                ],
                                              ),
                                              InkWell(
                                                  onTap: () {
                                                    setState(() {
                                                      insuredPatientImages
                                                          .remove(insuredPatientImages[index]);
                                                    });
                                                  },
                                                  child: Icon(
                                                    FontAwesomeIcons.trashAlt,
                                                    color: Colors.red[300],
                                                  ))
                                            ],
                                          ),
                                        )),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 12,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
            bottomSheet: Container(
              height: MediaQuery.of(context).size.height * 0.1,
              width: double.infinity,
              padding: EdgeInsets.all(9),
              child: SecondaryButton(
                textColor: Colors.white,
                label: "Submit",
                onTap: () async {
                  this.widget.createEReferralRequestModel.medicalReportAttachment = medicalReportImages;
                  this.widget.createEReferralRequestModel.insuranceCardAttachment = insuredPatientImages.length !=0?insuredPatientImages[0]:null;
                  this.widget.createEReferralRequestModel.isInsuredPatient = isPatientInsured;
                  // ToDo make the preferred Branch info dynamic
                  this.widget.createEReferralRequestModel.preferredBranchCode = 15;
                  this.widget.createEReferralRequestModel. preferredBranchName= "Arryan Hospital";



                  // this.widget.createEReferralRequestModel.fullName= "";
                  this.widget.createEReferralRequestModel.otherRelationship= "";
                  // this.widget.createEReferralRequestModel.;
                  // this.widget.createEReferralRequestModel. preferredBranchName= "Arryan Hospital";
                  // this.widget.createEReferralRequestModel. preferredBranchName= "Arryan Hospital";

                  await model.createEReferral(this.widget.createEReferralRequestModel);
                },
                loading: model.state == ViewState.BusyLocal,
                disabled: medicalReportImages.length == 0 ,
              ),
            )));
  }

  void confirmSelectCityDialog(List<GetAllCitiesResponseModel> cities) {
    showDialog(
      context: context,
      child: SelectCityDialog(
        cities: cities,
        selectedCity: _selectedCity,
        onValueSelected: (value) {
          setState(() {
            _selectedCity = value;
          });
        },
      ),
    );
  }


  String getRelationName() {
    if (_selectedCity != null)
      return _selectedCity.description;
    else
      return "Select Relationship" /*TranslationBase.of(context).selectHospital*/;
  }

}
