PatientApp-KKUMC/lib/pages/Blood/blood_donation_book_appointment.dart

import 'package:diplomaticquarterapp/core/model/blooddonation/blood_donation_free_slots_response.dart';
import 'package:diplomaticquarterapp/core/model/blooddonation/blood_donation_projects_list_response.dart';
import 'package:diplomaticquarterapp/core/service/blood/blood_donation_service.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/models/Appointments/FreeSlot.dart';
import 'package:diplomaticquarterapp/models/Appointments/timeSlot.dart';
import 'package:diplomaticquarterapp/pages/Blood/blood_donation_appointment_terms_conditions.dart';
import 'package:diplomaticquarterapp/services/appointment_services/GetDoctorsList.dart';
import 'package:diplomaticquarterapp/theme/colors.dart';
import 'package:diplomaticquarterapp/uitl/app_toast.dart';
import 'package:diplomaticquarterapp/uitl/date_uitl.dart';
import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/uitl/utils_new.dart';
import 'package:diplomaticquarterapp/widgets/buttons/custom_text_button.dart';
import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart';
import 'package:diplomaticquarterapp/widgets/dialogs/confirm_dialog.dart';
import 'package:diplomaticquarterapp/widgets/dialogs/radio_selection_dialog.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

import '../AlHabibMedicalService/h2o/h20_setting.dart';

class BloodDonationBookAppointment extends StatefulWidget {
  const BloodDonationBookAppointment();

  static bool areSlotsAvailable = false;
  static DateTime? selectedAppoDateTime;
  static String? selectedDate;
  static String? selectedTime;

  @override
  State<BloodDonationBookAppointment> createState() => _BloodDonationBookAppointmentState();
}

class _BloodDonationBookAppointmentState extends State<BloodDonationBookAppointment> with TickerProviderStateMixin {
  Map<DateTime, List>? _events;
  AnimationController? _animationController;
  CalendarController? _calendarController;

  List<BloodDonationProjectsListResponse> bloodDonationProjectsListResponse = [];
  int _selectedProjectID = 0;
  int _clinicID = 0;
  int _doctorID = 0;

  String selectedProjectName = "";

  List<TimeSlot> docFreeSlots = [];
  List<TimeSlot> dayEvents = [];

  var selectedDate = "";
  dynamic selectedDateJSON;
  dynamic jsonFreeSlots;

  int selectedButtonIndex = 0;

  List<BloodDonationFreeSlotsResponseModel> bloodDonationFreeSlotsResponse = [];

  ProjectViewModel? projectViewModel;
  ScrollController? _scrollController;

  var checkedValue = false;

  @override
  void initState() {
    final _selectedDay = DateTime.now();
    super.initState();

    _events = {
      _selectedDay: ['Event A0']
    };

    _scrollController = new ScrollController();

    _calendarController = CalendarController();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 50),
    );

    WidgetsBinding.instance.addPostFrameCallback((_) {
      getBloodDonationProjectsList();
    });
  }

  @override
  Widget build(BuildContext context) {
    projectViewModel = Provider.of(context);
    return AppScaffold(
      isShowAppBar: true,
      showNewAppBar: true,
      backgroundColor: Color(0xffF7F7F7),
      showNewAppBarTitle: true,
      isShowDecPage: true,
      description: TranslationBase.of(context).bloodDonationInfo,
      appBarTitle: TranslationBase.of(context).bloodD,
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(21),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(TranslationBase.of(context).selectHospitalBloodDonation, style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w600, letterSpacing: -0.64)),
              mHeight(12),
              CommonDropDownView(
                TranslationBase.of(context).selectProject,
                selectedProjectName,
                () {
                  List<RadioSelectionDialogModel> list = [];
                  bloodDonationProjectsListResponse.forEach((element) {
                    list.add(RadioSelectionDialogModel(element.projectName!, element.projectID!));
                  });
                  showDialog(
                    context: context,
                    builder: (cxt) => RadioSelectionDialog(
                      listData: list,
                      selectedIndex: 0,
                      onValueSelected: (index) {
                        print(index);
                        _selectedProjectID = index;
                        selectedProjectName = bloodDonationProjectsListResponse.firstWhere((element) => element.projectID == index).projectName!;
                        getBloodDonationFreeSlots();
                        setState(() {});
                      },
                    ),
                  );
                },
              ).withBorderedContainer,
              mHeight(12),
              Container(
                decoration: cardRadius(12),
                child: _buildTableCalendarWithBuilders(projectViewModel!),
              ),
              mHeight(12),
              Text(selectedDate, style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w600, letterSpacing: -0.64)),
              mHeight(8),
              BloodDonationBookAppointment.areSlotsAvailable
                  ? Container(
                      height: 40,
                      child: ListView.builder(
                        controller: _scrollController,
                        scrollDirection: Axis.horizontal,
                        itemCount: dayEvents.length,
                        itemBuilder: (context, index) {
                          return Container(
                            margin: EdgeInsets.only(right: (index == dayEvents.length - 1) ? 0 : 5.0, left: index == 0 ? 0 : 5),
                            child: ButtonTheme(
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5.0),
                                  side: BorderSide(
                                    color: index == selectedButtonIndex ? CustomColors.green : Colors.black, //Color of the border
                                    style: BorderStyle.solid, //Style of the border
                                    width: 1.5, //width of the border
                                  ),
                                ),
                                minWidth: MediaQuery.of(context).size.width * 0.2,
                                child: index == selectedButtonIndex ? getSelectedButton(index) : getNormalButton(index)),
                          );
                        },
                      ),
                    )
                  : Center(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 12.0, right: 12.0),
                        child: Text(TranslationBase.of(context).noSlotsError, style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600, letterSpacing: -0.46, color: CustomColors.grey)),
                      ),
                    ),
              SizedBox(height: 16),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    TranslationBase.of(context).viewTermsConditions + ":",
                    style: TextStyle(fontWeight: FontWeight.w600, color: Color(0xff2E303A), fontSize: 14, letterSpacing: -0.56),
                  ),
                  InkWell(
                    onTap: () {
                      Navigator.of(context).push(FadePage(page: BloodDonationAppointmentTermsConditions()));
                    },
                    child: Text(
                      TranslationBase.of(context).clickHere,
                      style: TextStyle(fontWeight: FontWeight.w600, color: Colors.blue, fontSize: 14, letterSpacing: -0.56),
                    ),
                  )
                ],
              ),
              SizedBox(height: 12),
              Row(
                children: [
                  Checkbox(
                    onChanged: (bool? value) {
                      setState(() {
                        checkedValue = value!;
                      });
                    },
                    value: checkedValue,
                    activeColor: Color(0xFFc5272d),
                  ),
                  Text(
                    TranslationBase.of(context).iAgreeToTheTermsAndConditions,
                    style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      bottomSheet: Container(
        color: Colors.white,
        height: MediaQuery.of(context).size.height * 0.081,
        width: double.infinity,
        padding: EdgeInsets.all(12.0),
        child: Column(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width * 0.9,
              child: DefaultButton(
                TranslationBase.of(context).bookAppo,
                () async {
                  if (BloodDonationBookAppointment.areSlotsAvailable) {
                    if (checkedValue) {
                      insertBloodDonationAppointment();
                    } else {
                      AppToast.showErrorToast(message: TranslationBase.of(context).pleaseAcceptTerms);
                    }
                  } else {
                    AppToast.showErrorToast(message: TranslationBase.of(context).selectSlot);
                  }
                },
                textColor: Colors.white,
                color: CustomColors.green,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void insertBloodDonationAppointment() {
    DoctorsListService service = new DoctorsListService();
    final timeSlot = BloodDonationBookAppointment.selectedAppoDateTime;
    GifLoaderDialogUtils.showMyDialog(context);
    service
        .insertAppointment(_doctorID, _clinicID, _selectedProjectID, BloodDonationBookAppointment.selectedTime!, BloodDonationBookAppointment.selectedDate!, 45, projectViewModel!.isArabic ? 1 : 2,
            context, null, null, null, projectViewModel)
        .then((res) {
      GifLoaderDialogUtils.hideDialog(context);
      if (res['MessageStatus'] == 1) {
        AppToast.showSuccessToast(message: TranslationBase.of(context).bookedSuccess);
        Navigator.of(context).pop();
      } else {
        ConfirmDialog dialog = new ConfirmDialog(
            context: context,
            confirmMessage: res['ErrorEndUserMessage'],
            okText: TranslationBase.of(context).ok,
            cancelText: TranslationBase.of(context).cancel_nocaps,
            okFunction: () async {
              // openAppSettings();
              Navigator.pop(context);
            },
            cancelFunction: () => {});
        dialog.showAlertDialog(context);
        // AppToast.showErrorToast(message: res['ErrorEndUserMessage']);
      }
    }).catchError((err) {
      GifLoaderDialogUtils.hideDialog(context);
      ConfirmDialog dialog = new ConfirmDialog(
          context: context,
          confirmMessage: err,
          okText: TranslationBase.of(context).ok,
          cancelText: TranslationBase.of(context).cancel_nocaps,
          okFunction: () async {
            // openAppSettings();
            Navigator.pop(context);
          },
          cancelFunction: () => {});
      dialog.showAlertDialog(context);
    });
  }

  void _onDaySelected(DateTime day, ProjectViewModel projectViewModel) {
    final DateFormat formatter = DateFormat('yyyy-MM-dd');
    setState(() {
      this.selectedDate = DateUtil.getWeekDayMonthDayYearDateFormatted(day, projectViewModel.isArabic ? "ar" : "en");
      openTimeSlotsPickerForDate(day, docFreeSlots);
      BloodDonationBookAppointment.selectedDate = formatter.format(day);
      _calendarController!.selectedDate = day;
      print(BloodDonationBookAppointment.selectedDate);
    });
  }

  Widget _buildTableCalendarWithBuilders(ProjectViewModel projectViewModel) {
    return SfCalendar(
      controller: _calendarController,
      minDate: DateTime.now(),
      showNavigationArrow: true,
      headerStyle: CalendarHeaderStyle(textAlign: TextAlign.center, textStyle: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600, letterSpacing: -0.46)),
      viewHeaderStyle: ViewHeaderStyle(dayTextStyle: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w600, letterSpacing: -0.46, color: CustomColors.black)),
      view: CalendarView.month,
      todayHighlightColor: CustomColors.green,
      selectionDecoration: containerColorRadiusBorderWidthCircular(Colors.transparent, 4, CustomColors.green, 2.5),
      cellBorderColor: Colors.white,
      dataSource: MeetingDataSource(_getDataSource()),
      monthViewSettings: const MonthViewSettings(appointmentDisplayMode: MonthAppointmentDisplayMode.indicator, showTrailingAndLeadingDates: false, appointmentDisplayCount: 1),
      onTap: (CalendarTapDetails details) {
        _calendarController!.selectedDate = details.date;
        _onDaySelected(details.date!, projectViewModel);
      },
    );
  }

  Widget getNormalButton(int index) {
    return CustomTextButton(
      backgroundColor: Colors.white,
      elevation: 0,
      side: BorderSide(
          color: Colors.black, //Color of the border
          style: BorderStyle.solid, //Style of the border
          width: 1.5 //width of the border
          ),
      onPressed: () {
        final timeslot = dayEvents[index];
        BloodDonationBookAppointment.selectedAppoDateTime = timeslot.end;

        setState(() {
          selectedButtonIndex = index;
          BloodDonationBookAppointment.selectedTime = dayEvents[index].isoTime;
          print(BloodDonationBookAppointment.selectedTime);
        });
      },
      child: Text(dayEvents[index].isoTime!, style: TextStyle(fontSize: 12.0, color: Color(0xFF60686b))),
    );
  }

  Widget getSelectedButton(int index) {
    return CustomTextButton(
      backgroundColor: CustomColors.green,
      elevation: 0,
      side: BorderSide(
          color: CustomColors.green, //Color of the border
          style: BorderStyle.solid, //Style of the border
          width: 1.5 //width of the border
          ),
      onPressed: () {
        setState(() {
          selectedButtonIndex = index;
          BloodDonationBookAppointment.selectedTime = dayEvents[index].isoTime;
          print(BloodDonationBookAppointment.selectedTime);
        });
      },
      child: Text(dayEvents[index].isoTime!, style: TextStyle(fontSize: 12.0, color: Colors.white)),
    );
  }

  getBloodDonationFreeSlots() {
    BloodDonationService service = new BloodDonationService();
    GifLoaderDialogUtils.showMyDialog(context);
    service.getBloodDonationFreeSlots(134, _selectedProjectID).then((res) {
      GifLoaderDialogUtils.hideDialog(context);
      if (res["MessageStatus"] == 1) {
        res['BD_FreeSlots'].forEach((element) {
          bloodDonationFreeSlotsResponse.add(BloodDonationFreeSlotsResponseModel.fromJson(element));
        });
        print(bloodDonationFreeSlotsResponse.length);
        _getJSONSlots().then((value) => {
              setState(() => {_clinicID = bloodDonationFreeSlotsResponse[0].clinicID!, _doctorID = bloodDonationFreeSlotsResponse[0].doctorID!, _events!.clear(), _events = value})
            });
      } else {
        AppToast.showErrorToast(message: res["ErrorEndUserMessage"]);
      }
    }).catchError((err) {
      GifLoaderDialogUtils.hideDialog(context);
      print(err);
    });
  }

  openTimeSlotsPickerForDate(DateTime dateStart, List<TimeSlot> freeSlots) {
    dayEvents.clear();
    DateTime dateStartObj = new DateTime(dateStart.year, dateStart.month, dateStart.day, 0, 0, 0, 0, 0);

    freeSlots.forEach((v) {
      if (v.start == dateStartObj) dayEvents.add(v);
    });

    setState(() {
      if (dayEvents.length != 0) {
        BloodDonationBookAppointment.areSlotsAvailable = true;
        selectedButtonIndex = 0;
        BloodDonationBookAppointment.selectedTime = dayEvents[selectedButtonIndex].isoTime;
      } else
        BloodDonationBookAppointment.areSlotsAvailable = false;
    });
  }

  Future<Map<DateTime, List>> _getJSONSlots() async {
    Map<DateTime, List> _eventsParsed;
    List<FreeSlot> slotsList = [];
    DateTime date;
    final DateFormat formatter = DateFormat('HH:mm');
    final DateFormat dateFormatter = DateFormat('yyyy-MM-dd');
    for (var i = 0; i < bloodDonationFreeSlotsResponse.length; i++) {
      date = DateUtil.convertStringToDate(bloodDonationFreeSlotsResponse[i].freeTimeSlots);
      slotsList.add(FreeSlot(date, ['slot']));
      docFreeSlots.add(TimeSlot(isoTime: formatter.format(date), start: new DateTime(date.year, date.month, date.day, 0, 0, 0, 0), end: date));
    }
    _eventsParsed = Map.fromIterable(slotsList, key: (e) => e.slot, value: (e) => e.event);
    setState(() {
      BloodDonationBookAppointment.selectedDate = dateFormatter.format(DateUtil.convertStringToDate(bloodDonationFreeSlotsResponse[0].freeTimeSlots));
      selectedDate = DateUtil.getMonthDayYearDateFormatted(DateUtil.convertStringToDate(bloodDonationFreeSlotsResponse[0].freeTimeSlots));
      selectedDateJSON = bloodDonationFreeSlotsResponse[0].freeTimeSlots;
    });
    openTimeSlotsPickerForDate(DateUtil.convertStringToDate(selectedDateJSON), docFreeSlots);
    _calendarController!.selectedDate = DateUtil.convertStringToDate(selectedDateJSON);
    return _eventsParsed;
  }

  getBloodDonationProjectsList() {
    BloodDonationService service = new BloodDonationService();
    GifLoaderDialogUtils.showMyDialog(context);
    service.getBloodDonationProjectsList().then((res) {
      GifLoaderDialogUtils.hideDialog(context);
      print(res['BD_getProjectsHaveBDClinics']);
      if (res["MessageStatus"] == 1) {
        res['BD_getProjectsHaveBDClinics'].forEach((element) {
          bloodDonationProjectsListResponse.add(BloodDonationProjectsListResponse.fromJson(element));
        });
        print(bloodDonationProjectsListResponse.length);
      } else {
        AppToast.showErrorToast(message: res["ErrorEndUserMessage"]);
      }
    }).catchError((err) {
      GifLoaderDialogUtils.hideDialog(context);
      print(err);
    });
  }

  List<Meeting> _getDataSource() {
    final List<Meeting> meetings = <Meeting>[];
    _events!.forEach((key, value) {
      final DateTime startTime = DateTime(key.year, key.month, key.day, 9, 0, 0);
      final DateTime endTime = startTime.add(const Duration(minutes: 20));
      meetings.add(Meeting("", startTime, endTime, CustomColors.green, false));
    });
    return meetings;
  }
}

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return _getMeetingData(index).from;
  }

  @override
  DateTime getEndTime(int index) {
    return _getMeetingData(index).to;
  }

  @override
  String getSubject(int index) {
    return _getMeetingData(index).eventName;
  }

  @override
  Color getColor(int index) {
    return _getMeetingData(index).background;
  }

  @override
  bool isAllDay(int index) {
    return _getMeetingData(index).isAllDay;
  }

  Meeting _getMeetingData(int index) {
    final dynamic meeting = appointments![index];
    Meeting? meetingData;
    if (meeting is Meeting) {
      meetingData = meeting;
    }
    return meetingData!;
  }
}

class Meeting {
  Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;
}