import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/core/model/rate/appointment_details.dart';
import 'package:diplomaticquarterapp/core/model/rate/appoitment_rated.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/uitl/app_toast.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/avatar/large_avatar.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.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 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) {
    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(
                      TranslationBase.of(context).lastAppointment,
                      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.clinicName,
                            width: 110,
                            height: 110,
                          ),
                          SizedBox(
                            height: 22,
                          ),
                          Texts(
                            model.appointmentDetails.projectName,
                            bold: true,
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Texts(
                            model.appointmentDetails.clinicName,
                            bold: true,
                          ),
                          SizedBox(
                            height: 8,
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    Center(
                        child: Texts(
                      TranslationBase.of(context).rateClinic,
                      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: 45.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),
                    SizedBox(
                      height: 12,
                    ),
                  ],
                ),
              ),
            ),
          ),
          bottomSheet: Container(
            height: MediaQuery.of(context).size.height * 0.15,
            width: double.infinity,
            color: Colors.grey[200],
            child: Column(
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width * 0.9,
                  child: SecondaryButton(
                      onTap: () async {
                        if (rating > 0) {
                          model
                              .sendAppointmentRate(
                                  rating,
                                  widget.appointmentDetails.appointmentNo,
                                  widget.appointmentDetails.projectID,
                                  widget.appointmentDetails.doctorID,
                                  widget.appointmentDetails.clinicID,
                                  note)
                              .then(
                                (value) => {
                                  Navigator.pushReplacement(
                                    context,
                                    FadePage(
                                      page: LandingPage(),
                                    ),
                                  )
                                },
                              );
                        } else {
                          AppToast.showErrorToast(
                              message: 'please rate the clinic');
                        }
                      },
                      label: TranslationBase.of(context).submit,
                      disabled: (model.state == ViewState.Busy || rating==0),
                     // loading: model.state == ViewState.BusyLocal,
                      textColor: Theme.of(context).backgroundColor),
                ),
                SizedBox(
                  height: 12,
                ),
                InkWell(
                  onTap: () {
                    Navigator.pushReplacement(
                      context,
                      FadePage(
                        page: LandingPage(),
                      ),
                    );
                  },
                  child: Texts(
                      TranslationBase.of(context).later,
                    decoration: TextDecoration.underline,
                    color: HexColor('#151DFE'),
                    fontSize: 18,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}