import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/core/viewModels/feedback/feedback_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/app_toast.dart';
import 'package:diplomaticquarterapp/uitl/date_uitl.dart';
import 'package:diplomaticquarterapp/widgets/avatar/large_avatar.dart';
import 'package:diplomaticquarterapp/widgets/bottom_options/BottomSheet.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/input/text_field.dart';
import 'package:diplomaticquarterapp/widgets/others/StarRating.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 'appointment_history.dart';

class SendFeedbackPage extends StatefulWidget {
  @override
  _SendFeedbackPageState createState() => _SendFeedbackPageState();
}

class _SendFeedbackPageState extends State<SendFeedbackPage> {
  TextEditingController titleController = TextEditingController();
  TextEditingController messageController = TextEditingController();
  List<String> images = [];
  String title;
  AppointmentHistory appointHistory;
  bool isShowListAppointHistory = true;
  String message;
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return BaseView<FeedbackViewModel>(
      builder: (_, model, widget) => AppScaffold(
        baseViewModel: model,
        body: Container(
          height: MediaQuery.of(context).size.height * 0.8,
          child: SingleChildScrollView(
            child: Form(
              key: formKey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    height: 65,
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 20, right: 20, top: 8),
                    child: Texts(
                      'We\'d love to hear your feedback about the health care services and online services. Please fill in the required fields',
                      //يسعدنا سماع ملاحظاتك  حول خدمات الرعاية الصحية والخدمات الإلكترونية. يرجى تعبئة الحقول المطلوبة
                      textAlign: TextAlign.center,
                      variant: 'body2Link',
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      confirmBox(model);
                    },
                    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: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Container(
                            child: Texts(
                              model.selected,
                              variant: 'bodyText',
                            ),
                            margin: EdgeInsets.only(left: 10),
                          ),
                          Icon(
                            Icons.arrow_drop_down,
                            size: 22,
                            color: Colors.grey,
                          )
                        ],
                      ),
                    ),
                  ),
                  if (appointHistory != null && model.messageType ==
                      MessageType.ComplaintOnAnAppointment)
                    InkWell(
                      onTap: () {
                        setState(() {
                          isShowListAppointHistory = true;
                        });
                      },
                      child: Container(
                        margin: EdgeInsets.all(8.0),
                        color: Colors.white,
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              flex: 4,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(10.0),
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                          flex: 1,
                                          child: LargeAvatar(
                                            name: appointHistory.doctorNameObj,
                                            url: appointHistory.doctorImageURL,
                                          ),
                                        ),
                                        Expanded(
                                          flex: 4,
                                          child: Container(
                                            margin: EdgeInsets.all(10),
                                            child: Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: <Widget>[
                                                Texts(
                                                  appointHistory.doctorNameObj,
                                                  bold: true,
                                                ),
                                                Texts(
                                                  DateUtil
                                                      .getMonthDayYearDateFormatted(
                                                          appointHistory
                                                              .appointmentDate),
                                                  variant: 'caption3',
                                                ),
                                                StarRating(
                                                    totalAverage: appointHistory
                                                        .doctorRate
                                                        .toDouble(),
                                                    forceStars: true),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: Center(
                                child: Icon(
                                  Icons.arrow_forward_ios,
                                  size: 15,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  if (model.messageType ==
                          MessageType.ComplaintOnAnAppointment &&
                      model.appointHistoryList.length != 0 &&
                      isShowListAppointHistory)
                    Container(
                      height: MediaQuery.of(context).size.height * 0.4,
                      child: ListView.builder(
                        itemCount: model.appointHistoryList.length,
                        itemBuilder: (context, index) => InkWell(
                          onTap: () {
                            setState(() {
                              appointHistory = model.appointHistoryList[index];
                              isShowListAppointHistory = false;
                            });
                          },
                          child: Container(
                            margin: EdgeInsets.only(left: 8, right: 8),
                            color: Colors.white,
                            child: Column(
                              children: <Widget>[
                                Row(
                                  children: <Widget>[
                                    Expanded(
                                      flex: 4,
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: <Widget>[
                                          Padding(
                                            padding: const EdgeInsets.all(10.0),
                                            child: Row(
                                              children: <Widget>[
                                                Expanded(
                                                  flex: 1,
                                                  child: LargeAvatar(
                                                    name: model
                                                        .appointHistoryList[
                                                            index]
                                                        .doctorNameObj,
                                                    url: model
                                                        .appointHistoryList[
                                                            index]
                                                        .doctorImageURL,
                                                  ),
                                                ),
                                                Expanded(
                                                  flex: 4,
                                                  child: Container(
                                                    margin: EdgeInsets.all(10),
                                                    child: Column(
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .start,
                                                      children: <Widget>[
                                                        Texts(
                                                          model
                                                              .appointHistoryList[
                                                                  index]
                                                              .doctorNameObj,
                                                          bold: true,
                                                        ),
                                                        Texts(
                                                          DateUtil.getMonthDayYearDateFormatted(model
                                                              .appointHistoryList[
                                                                  index]
                                                              .appointmentDate),
                                                          variant: 'caption3',
                                                        ),
                                                        StarRating(
                                                            totalAverage: model
                                                                .appointHistoryList[
                                                                    index]
                                                                .doctorRate
                                                                .toDouble(),
                                                            forceStars: true),
                                                      ],
                                                    ),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Expanded(
                                      flex: 1,
                                      child: Center(
                                        child: Icon(
                                          Icons.arrow_forward_ios,
                                          size: 15,
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                                SizedBox(
                                  height: 5,
                                ),
                                Divider(
                                  height: 0.5,
                                  color: Colors.grey[400],
                                )
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  Container(
                    margin: EdgeInsets.only(left: 10, right: 10, top: 15),
                    child: TextFields(
                      hintText: 'Title',
                      controller: titleController,
                      fontSize: 13.5,
                      hintColor: Colors.black,
                      fontWeight: FontWeight.w600,
                      validator: (value) {
                        if (value == null)
                          return "please Enter title";
                        else
                          return null;
                      },
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 10, right: 10, top: 15),
                    child: TextFields(
                        hintText: 'message',
                        fontSize: 13.5,
                        hintColor: Colors.black,
                        fontWeight: FontWeight.w600,
                        maxLines: 25,
                        minLines: 13,
                        controller: messageController,
                        validator: (value) {
                          if (value == null)
                            return "please Enter message";
                          else
                            return null;
                        }),
                  ),
                  InkWell(
                    onTap: () {
                      ImageOptions.showImageOptions(context, (String image) {
                        setState(() {
                          images.add(image);
                        });
                      });
                    },
                    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,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  ...List.generate(
                      images.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(() {
                                        images.remove(images[index]);
                                      });
                                    },
                                    child: Icon(
                                      FontAwesomeIcons.trashAlt,
                                      color: Colors.red[300],
                                    ))
                              ],
                            ),
                          )),
                  SizedBox(
                    height: 30,
                  ),
                ],
              ),
            ),
          ),
        ),
        bottomSheet: Container(
          height: MediaQuery.of(context).size.height * 0.13,
          width: double.infinity,
          padding: EdgeInsets.all(8.0),
          child: Center(
            child: Container(
              height: MediaQuery.of(context).size.height * 0.1,
              width: MediaQuery.of(context).size.width * 0.8,
              child: Button(
                label: 'Send',
                loading: model.state == ViewState.BusyLocal,
                onTap: () {
                  final form = formKey.currentState;
                  if (form.validate()) if (model.messageType != MessageType.NON)
                    model
                        .sendCOCItem(
                            title: titleController.text,
                            attachment: images.length > 0 ? images[0] : "",
                            details: messageController.text,
                            cOCTypeName: getCOCName(model),
                            appointHistory: model.messageType ==
                                    MessageType.ComplaintOnAnAppointment
                                ? appointHistory
                                : null)
                        .then((value) {
                      if (value) {
                        setState(() {
                          titleController.text = "";
                          messageController.text = "";
                          images = [];
                        });
                        model.setMessageType(MessageType.NON);
                        AppToast.showSuccessToast(
                            message: "Your feedback was send");
                      } else {
                        AppToast.showErrorToast(message: model.error);
                      }
                    });
                  else {
                    AppToast.showErrorToast(message: "Please select COC");
                  }
                },
              ),
            ),
          ),
        ),
      ),
    );
  }

  String getCOCName(FeedbackViewModel model) {
    switch (model.messageType) {
      case MessageType.ComplaintOnAnAppointment:
        return "1";
        break;
      case MessageType.ComplaintWithoutAppointment:
        return "2";
        break;
      case MessageType.Question:
        return "3";
        break;
      case MessageType.Compliment:
        return "4";
        break;
      case MessageType.Suggestion:
        return "5";
        break;
      case MessageType.NON:
        return "";
        break;
    }
    return "";
  }

  // Show Dialog function
  void confirmBox(FeedbackViewModel model) {
    showDialog(
        context: context,
        child: FeedbackTypeDialog(
          onValueSelected: (MessageType value) {
            if (value == MessageType.ComplaintOnAnAppointment) {
              model.getPatentAppointmentHistory().then((value) {
                setState(() {
                  appointHistory = null;
                });
              });
            }
            model.setMessageType(value);
          },
        ));
  }
}

class FeedbackTypeDialog extends StatefulWidget {
  final Function(MessageType) onValueSelected;

  const FeedbackTypeDialog({Key key, this.onValueSelected}) : super(key: key);

  @override
  State createState() => new FeedbackTypeDialogState();
}

class FeedbackTypeDialogState extends State<FeedbackTypeDialog> {
  Widget build(BuildContext context) {
    return BaseView<FeedbackViewModel>(
      builder: (_, model, widge) => SimpleDialog(
        title: Text(
          "Message Type",
          textAlign: TextAlign.center,
        ),
        children: <Widget>[
          Container(
            // padding: const EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                Divider(
                  height: 2.5,
                  color: Colors.grey[500],
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () => model.setMessageDialogType(
                            MessageType.ComplaintOnAnAppointment),
                        child: ListTile(
                          title: const Text('Complaint on an appointment'),
                          leading: Radio(
                            value: MessageType.ComplaintOnAnAppointment,
                            groupValue: model.messageTypeDialog,
                            activeColor: Colors.red[800],
                            onChanged: (MessageType value) =>
                                model.setMessageDialogType(value),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 5.0,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () => model.setMessageDialogType(
                            MessageType.ComplaintWithoutAppointment),
                        child: ListTile(
                          title: const Text('Complaint without appointment'),
                          leading: Radio(
                            value: MessageType.ComplaintWithoutAppointment,
                            groupValue: model.messageTypeDialog,
                            activeColor: Colors.red[800],
                            onChanged: (MessageType value) =>
                                model.setMessageDialogType(value),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 5.0,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () =>
                            model.setMessageDialogType(MessageType.Question),
                        child: ListTile(
                          title: const Text('Question'),
                          leading: Radio(
                            value: MessageType.Question,
                            groupValue: model.messageTypeDialog,
                            activeColor: Colors.red[800],
                            onChanged: (MessageType value) =>
                                model.setMessageDialogType(value),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 5.0,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () =>
                            model.setMessageDialogType(MessageType.Compliment),
                        child: ListTile(
                          title: const Text('compliment'),
                          leading: Radio(
                            value: MessageType.Compliment,
                            groupValue: model.messageTypeDialog,
                            activeColor: Colors.red[800],
                            onChanged: (MessageType value) =>
                                model.setMessageDialogType(value),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 5.0,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () =>
                            model.setMessageDialogType(MessageType.Suggestion),
                        child: ListTile(
                          title: const Text('Suggestion'),
                          leading: Radio(
                            value: MessageType.Suggestion,
                            groupValue: model.messageTypeDialog,
                            activeColor: Colors.red[800],
                            onChanged: (MessageType value) =>
                                model.setMessageDialogType(value),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 5.0,
                ),
                Divider(
                  height: 2.5,
                  color: Colors.grey[500],
                ),
                SizedBox(
                  height: 5,
                ),
                Row(
                  // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            child: Center(
                              child: Texts(
                                'cancel',
                                color: Colors.red,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      width: 1,
                      height: 30,
                      color: Colors.grey[500],
                    ),
                    Expanded(
                        flex: 1,
                        child: InkWell(
                          onTap: () {
                            widget.onValueSelected(model.messageTypeDialog);
                            Navigator.pop(context);
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Center(
                                child: Texts(
                              'ok',
                              fontWeight: FontWeight.w400,
                            )),
                          ),
                        )),
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
