import 'package:diplomaticquarterapp/core/model/rate/appointment_details.dart';
import 'package:diplomaticquarterapp/core/viewModels/appointment_rate_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/landing/landing_page.dart';
import 'package:diplomaticquarterapp/theme/colors.dart';
import 'package:diplomaticquarterapp/uitl/date_uitl.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/uitl/utils_new.dart';
import 'package:diplomaticquarterapp/widgets/avatar/large_avatar.dart';
import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart';
import 'package:diplomaticquarterapp/widgets/my_rich_text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

class RateAppointmentClinic extends StatefulWidget {
  final AppointmentDetails appointmentDetails;
  final String doctorNote;
  final int doctorRate;

  RateAppointmentClinic({this.appointmentDetails, this.doctorRate, this.doctorNote});

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

class _RateAppointmentClinicState extends State<RateAppointmentClinic> {
  final formKey = GlobalKey<FormState>();
  String note = "";
  int rating = 0;

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    return BaseView<AppointmentRateViewModel>(
      builder: (_, model, w) => AppScaffold(
        isShowAppBar: true,
        showNewAppBar: true,
        showNewAppBarTitle: true,
        baseViewModel: model,
        appBarTitle: TranslationBase.of(context).rateAppointment,
        body: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.all(12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  TranslationBase.of(context).lastAppointment,
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16),
                ),
                SizedBox(
                  height: 25,
                ),
                Container(
                  decoration: cardRadius(10),
                  child: Padding(
                    padding: const EdgeInsets.only(left: 12, right: 12, top: 12, bottom: 12),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 10.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                model.appointmentDetails.projectName ?? '',
                                style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2E303A), letterSpacing: -0.64, height: 25 / 16),
                              ),
                              Text(
                                model.appointmentDetails.startTime.toString().substring(0, 5),
                                style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xff2E303A), letterSpacing: -0.64, height: 25 / 16),
                              ),
                            ],
                          ),
                        ),
                        Row(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            LargeAvatar(
                              url: 'https://hmgwebservices.com/Images/Hospitals/' + model.appointmentDetails.projectID.toString() + '.jpg',
                              width: 48,
                              height: 48,
                            ),
                            SizedBox(width: 11),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  MyRichText(TranslationBase.of(context).clinic + ":", model.appointmentDetails.projectName, projectViewModel.isArabic),
                                  MyRichText(TranslationBase.of(context).date + ":", DateUtil.getDayMonthYearDateFormatted(DateUtil.convertStringToDate(model.appointmentDetails.appointmentDate)),
                                      projectViewModel.isArabic),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 12,
                ),
                Container(
                  width: double.infinity,
                  child: Container(
                    decoration: cardRadius(10),
                    child: Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            TranslationBase.of(context).rateClinic,
                            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16),
                          ),
                          SizedBox(
                            height: 12,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              ...List.generate(
                                5,
                                (index) => AnimatedSwitcher(
                                  duration: Duration(milliseconds: 300),
                                  switchInCurve: Curves.elasticOut,
                                  switchOutCurve: Curves.elasticIn,
                                  transitionBuilder: (Widget child, Animation<double> animation) {
                                    return ScaleTransition(child: child, scale: animation);
                                  },
                                  child: rating == (index + 1)
                                      ? Container(
                                          margin: EdgeInsets.only(left: 3.0, right: 3.0),
                                          decoration: BoxDecoration(borderRadius: BorderRadius.circular(100), border: Border.all(width: 3, color: CustomColors.green)),
                                          key: ValueKey<int>(rating),
                                          child: IconButton(
                                            onPressed: () {
                                              setState(() {
                                                rating = index + 1;
                                              });
                                            },
                                            iconSize: 35,
                                            icon: SvgPicture.asset('assets/images/new/appointment-rating/' + (index + 1).toString() + '.svg'),
                                          ),
                                        )
                                      : Container(
                                          key: ValueKey<int>(rating),
                                          child: IconButton(
                                            onPressed: () {
                                              setState(() {
                                                rating = index + 1;
                                              });
                                            },
                                            iconSize: 35,
                                            icon: SvgPicture.asset('assets/images/new/appointment-rating/' + (index + 1).toString() + '.svg'),
                                          ),
                                        ),
                                ),
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 12),
                SizedBox(
                  height: 12,
                ),
              ],
            ),
          ),
        ),
        bottomSheet: Container(
          color: Colors.white,
          padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: DefaultButton(
                  TranslationBase.of(context).later,
                  () {
                    Navigator.pushReplacement(
                      context,
                      FadePage(
                        page: LandingPage(),
                      ),
                    );
                  },
                  color: CustomColors.accentColor,
                  textColor: Colors.white,
                ),
              ),
              SizedBox(width: 10),
              Expanded(
                child: DefaultButton(
                  TranslationBase.of(context).submit,
                  rating <= 0
                      ? null
                      : () {
                          model
                              .sendAppointmentRate(
                                  rating, widget.appointmentDetails.appointmentNo, widget.appointmentDetails.projectID, widget.appointmentDetails.doctorID, widget.appointmentDetails.clinicID, note)
                              .then(
                                (value) => {
                                  model
                                      .sendDoctorRate(
                                          widget.doctorRate,
                                          widget.appointmentDetails.appointmentNo,
                                          widget.appointmentDetails.projectID,
                                          widget.appointmentDetails.doctorID,
                                          widget.appointmentDetails.clinicID,
                                          note,
                                          widget.appointmentDetails.appointmentDate,
                                          widget.appointmentDetails.doctorName,
                                          widget.appointmentDetails.projectName,
                                          widget.appointmentDetails.clinicName)
                                      .then((value) {
                                    Navigator.pushReplacement(
                                      context,
                                      FadePage(
                                        page: LandingPage(),
                                      ),
                                    );
                                  }),
                                },
                              );
                        },
                  color: Color(0xff359846),
                  disabledColor: Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}