import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/localization/localization.dart';
import 'package:test_sa/controllers/providers/api/service_requests_provider.dart';
import 'package:test_sa/controllers/providers/api/user_provider.dart';
import 'package:test_sa/controllers/providers/settings/setting_provider.dart';
import 'package:test_sa/controllers/validator/validator.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/models/issue.dart';
import 'package:test_sa/models/service_request/service_request.dart';
import 'package:test_sa/models/subtitle.dart';
import 'package:test_sa/views/app_style/colors.dart';
import 'package:test_sa/views/app_style/sizing.dart';
import 'package:test_sa/views/widgets/app_text_form_field.dart';
import 'package:test_sa/views/widgets/buttons/app_back_button.dart';
import 'package:test_sa/views/widgets/buttons/app_button.dart';
import 'package:test_sa/views/widgets/issues/report_issue_item.dart';
import 'package:test_sa/views/widgets/loaders/loading_manager.dart';

class ReportIssuesPage extends StatefulWidget {
  static final String id = "/report-issue";
  final ServiceRequest serviceRequest;

  const ReportIssuesPage({Key key, this.serviceRequest}) : super(key: key);

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

class _ReportIssuesPageState extends State<ReportIssuesPage> {
  List<String> _issues = [];
  Issue _issue = Issue(reports: []);
  double _height;
  bool _isLoading = false;
  ServiceRequestsProvider _serviceRequestsProvider;
  UserProvider _userProvider;
  SettingProvider _settingProvider;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    _serviceRequestsProvider = Provider.of<ServiceRequestsProvider>(context);
    _userProvider = Provider.of<UserProvider>(context);
    _settingProvider = Provider.of<SettingProvider>(context);
    _height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: SafeArea(
        child: Form(
          key: _formKey,
          child: LoadingManager(
            onRefresh: () async {},
            stateCode: 200,
            isFailedLoading: false,
            isLoading: _isLoading,
            child: Stack(
              children: [
                SingleChildScrollView(
                  child: Column(
                    children: [
                      Center(
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: 16 * AppStyle.getScaleFactor(context),
                            vertical: 24 * AppStyle.getScaleFactor(context),
                          ),
                          child: Text(
                            context.translation.reportIssue,
                            style: Theme.of(context).textTheme.headline5.copyWith(color: AColors.cyan, fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Image(
                        height: _height / 8,
                        image: AssetImage("assets/images/logo.png"),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 16,
                          vertical: 16,
                        ),
                        decoration: BoxDecoration(
                            color: AColors.grey,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(AppStyle.getBorderRadius(context)),
                              topRight: Radius.circular(AppStyle.getBorderRadius(context)),
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: AColors.grey,
                                offset: Offset(0, -1),
                              )
                            ]),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            ATextFormField(
                              initialValue: _issue?.title,
                              hintText: context.translation.title,
                              textAlign: TextAlign.center,
                              style: Theme.of(context).textTheme.headline6,
                              validator: (value) => Validator.hasValue(value) ? null : context.translation.titleValidateMessage,
                              textInputType: TextInputType.name,
                              onSaved: (value) {
                                _issue.title = value;
                              },
                            ),
                            SizedBox(
                              height: 8,
                            ),
                            Column(
                                children: List.generate(
                                    _issues.length,
                                    (index) => ReportIssueItem(
                                          isSelected: _issue.reports.contains(index),
                                          issueInfo: _issues[index],
                                          onChange: (info, value) {
                                            if (value) {
                                              _issue.reports.add(index);
                                            } else {
                                              _issue.reports.remove(index);
                                            }
                                            setState(() {});
                                          },
                                        ))),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                "${context.translation.shareAntherIssue} :",
                                style: Theme.of(context).textTheme.headline6,
                              ),
                            ),
                            ATextFormField(
                              hintText: context.translation.description,
                              style: Theme.of(context).textTheme.subtitle1,
                              textInputType: TextInputType.multiline,
                              onSaved: (value) {
                                _issue.description = value;
                              },
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: AButton(
                                text: context.translation.submit,
                                onPressed: () async {
                                  if (!_formKey.currentState.validate()) return;
                                  _formKey.currentState.save();
                                  _issue.serviceRequestId = widget.serviceRequest.id;
                                  _isLoading = true;
                                  setState(() {});
                                  int status = await _serviceRequestsProvider.createIssueReport(
                                    user: _userProvider.user,
                                    host: _settingProvider.host,
                                    issue: _issue,
                                  );
                                  _isLoading = false;
                                  setState(() {});
                                  if (status >= 200 && status < 300) {
                                    Fluttertoast.showToast(
                                      msg: context.translation.successfulRequestMessage,
                                    );
                                    Navigator.of(context).pop();
                                  }
                                  _isLoading = false;
                                  setState(() {});
                                },
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                ABackButton(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}