import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/core/model/rate/appointment_details.dart';
import 'package:diplomaticquarterapp/core/viewModels/appointment_rate_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/landing/landing_page.dart';
import 'package:diplomaticquarterapp/pages/rateAppointment/rate_appointment_clinic.dart';
import 'package:diplomaticquarterapp/widgets/avatar/large_avatar.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/drawer/app_drawer_widget.dart';
import 'package:diplomaticquarterapp/widgets/input/text_field.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

class RateAppointmentDoctor extends StatefulWidget {
  @override
  _RateAppointmentDoctorState createState() => _RateAppointmentDoctorState();
}

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

  @override
  Widget build(BuildContext context) {
    return BaseView<AppointmentRateViewModel>(
      builder: (_, model, w) => AppScaffold(
        baseViewModel: model,
        body: Scaffold(
          backgroundColor: Colors.grey[200],
          appBar: AppBar(
            elevation: 0,
            textTheme: TextTheme(
              headline6:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
            title: Text('Rate'),
            leading: Builder(
              builder: (BuildContext context) {
                return IconButton(
                  icon: Icon(Icons.menu),
                  color: Colors.white,
                  onPressed: () => Scaffold.of(context).openDrawer(),
                );
              },
            ),
            centerTitle: true,
          ),
          drawer: SafeArea(child: AppDrawer()),
          body: FractionallySizedBox(
            widthFactor: 1,
            child: SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.all(12),
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: 25,
                    ),
                    Texts(
                      'How would you rate your last visit to the doctor',
                      bold: true,
                      color: Colors.black,
                    ),
                    SizedBox(
                      height: 25,
                    ),
                    Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        color: Colors.white,
                        shape: BoxShape.rectangle,
                        border: Border.all(color: Colors.white, width: 0.5),
                      ),
                      child: Column(
                        children: <Widget>[
                          SizedBox(
                            height: 8,
                          ),
                          LargeAvatar(
                            name: model.appointmentDetails.doctorName,
                            url: model.appointmentDetails.doctorImageURL,
                            width: 110,
                            height: 110,
                          ),
                          SizedBox(
                            height: 22,
                          ),
                          Texts(
                            model.appointmentDetails.doctorName,
                            bold: true,
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Texts(
                            model.appointmentDetails.clinicName,
                            bold: true,
                          ),
                          SizedBox(
                            height: 8,
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    Center(
                        child: Texts(
                      'Please rate the doctor',
                      textAlign: TextAlign.center,
                    )),
                    SizedBox(
                      height: 12,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        ...List.generate(
                          5,
                          (index) => AnimatedSwitcher(
                            duration: Duration(milliseconds: 1000),
                            switchInCurve: Curves.elasticOut,
                            switchOutCurve: Curves.elasticIn,
                            transitionBuilder:
                                (Widget child, Animation<double> animation) {
                              return ScaleTransition(
                                  child: child, scale: animation);
                            },
                            child: Container(
                              key: ValueKey<int>(rating),
                              child: IconButton(
                                  iconSize: 55.0,
                                  onPressed: () {
                                    setState(() {
                                      rating = index + 1;
                                    });
                                  },
                                  color: rating >= (index + 1)
                                      ? Color.fromRGBO(255, 186, 0, 1.0)
                                      : Colors.grey[400],
                                  // Theme.of(context).hintColor,
                                  icon: Icon(rating >= (index + 1)
                                      ? EvaIcons.star
                                      : EvaIcons.star)),
                            ),
                          ),
                        )
                      ],
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    Form(
                      key: formKey,
                      child: TextFields(
                        hintText: "Notes",
                        minLines: 4,
                        maxLines: 4,
                        validator: (value) {
                          if (value.isEmpty)
                            return 'Please enter your note';
                          else if (rating == 0) return 'Rating cannot be \"0\"';
                          return null;
                        },
                        onChanged: (value) {
                          setState(() {
                            note = value;
                          });
                        },
                      ),
                    ),
                    SizedBox(height: 12,),
                    Container(
                      width: double.infinity,
                      child: Column(
                        children: <Widget>[
                          Container(
                            width: MediaQuery.of(context).size.width * 0.9,
                            child: SecondaryButton(
                                onTap: () async {
                                  final form = formKey.currentState;
                                  if (form.validate()) {
                                    form.save();
                                    Navigator.push(
                                      context,
                                      FadePage(
                                        page: RateAppointmentClinic(
                                          appointmentDetails:
                                              model.appointmentDetails,
                                          doctorNote: note,
                                          doctorRate: rating,
                                        ),
                                      ),
                                    );
                                  }
                                },
                                label: "Next",
                                disabled: model.state == ViewState.BusyLocal,
                                loading: model.state == ViewState.BusyLocal,
                                textColor: Theme.of(context).backgroundColor),
                          ),
                          SizedBox(
                            height: 12,
                          ),
                          InkWell(
                            onTap: () {
                              Navigator.pushReplacement(
                                context,
                                FadePage(
                                  page: LandingPage(),
                                ),
                              );
                            },
                            child: Texts(
                              'Later',
                              decoration: TextDecoration.underline,
                              color: Hexcolor('#151DFE'),
                              fontSize: 18,
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}