import 'package:country_picker/country_picker.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:le_kiosque_by_gcs/model/user.dart';
import 'package:le_kiosque_by_gcs/services/firestore/user_service.dart';
import 'package:le_kiosque_by_gcs/ui/custom/profile_picture.dart';

class EditProfileView extends StatefulWidget {
  final UserService userService;

  const EditProfileView({
    Key key,
    @required this.userService,
  }) : super(key: key);

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

class _EditProfileViewState extends State<EditProfileView> {
  TextEditingController _countryController = TextEditingController();
  TextEditingController _cityController = TextEditingController();
  TextEditingController _dateController = TextEditingController();
  TextEditingController _genderController = TextEditingController();

  DateTime _selectedDate;

  final _formKey = GlobalKey<FormState>();
  KiosqueUser currentUser;

  void _submitForm(KiosqueUser user) async {
    if (_validateAndSaveForm()) {
      user.country = _countryController.text.toString();
      user.city = _cityController.text.toString();
      user.gender = _genderController.text.toString();
      user.birthDay = _selectedDate;

      await widget.userService.save(user);
      Navigator.of(context).pop();
    }
  }

  bool _validateAndSaveForm() {
    final formState = _formKey.currentState;
    if (formState.validate()) {
      formState.save();
      return true;
    } else {
      return false;
    }
  }

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1900, 8),
      lastDate: DateTime(2101),
    );

    final stringDate = DateFormat.yMMMd().format(picked);
    _selectedDate = picked;
    _dateController.text = stringDate;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<KiosqueUser>(
      stream: widget.userService
          .getCurrentUser(FirebaseAuth.instance.currentUser.uid),
      builder: (_, snapshot) {
        if (snapshot.hasData) {
          return Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.white,
              iconTheme: IconThemeData(
                color: Color(0xFF545454), //change your color here
              ),
            ),
            body: SingleChildScrollView(
              child: Column(
                children: [
                  Row(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child:
                            ProfilePicture(imageUrl: snapshot.data.profileUrl),
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            snapshot.data.displayName,
                            style: TextStyle(
                              fontSize: 26,
                              color: Colors.black,
                            ),
                          ),
                          Row(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(
                                  top: 10,
                                  right: 10,
                                  bottom: 10,
                                ),
                                child: Icon(
                                  Icons.location_on,
                                  color: Color(0xFFA5A5A5),
                                  size: 17,
                                ),
                              ),
                              Text(
                                snapshot.data.city ?? "No location",
                                style: TextStyle(color: Colors.grey),
                              )
                            ],
                          )
                        ],
                      )
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Form(
                      key: _formKey,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          TextFormField(
                            controller: _countryController,
                            readOnly: true,
                            validator: (value) => value.isEmpty ? 'Ne doit pas être vide ! !' : null,
                            onTap: () => _showCountryPicker(context),
                            decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              hintText: 'Pays',
                              labelText: "Pays",
                              hoverColor: Colors.black,
                            ),
                          ),
                          SizedBox(height: 16),
                          TextFormField(
                            controller: _cityController,
                            validator: (value) => value.isEmpty ? 'Ne doit pas être vide ! !' : null,
                            decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              hintText: 'Ville',
                              labelText: "Ville",
                              hoverColor: Colors.black,
                            ),
                          ),
                          SizedBox(height: 16),
                          TextFormField(
                            validator: (value) => value.isEmpty ? 'Ne doit pas être vide ! !' : null,
                            controller: _genderController,
                            onTap: () => _showGenderDialog(),
                            readOnly: true,
                            decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              hintText: 'Genre',
                              labelText: "Genre",
                              hoverColor: Colors.black,
                            ),
                          ),
                          SizedBox(height: 16),
                          TextFormField(
                            readOnly: true,
                            validator: (value) => value.isEmpty ? 'Ne doit pas être vide ! !' : null,
                            controller: _dateController,
                            onTap: () => _selectDate(context),
                            decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              hintText: 'Date de naissance',
                              labelText: "Date de naissance",
                              hoverColor: Colors.black,
                            ),
                          ),
                          SizedBox(height: 16),
                          SizedBox(
                            height: 50,
                            child: ElevatedButton(
                              onPressed: () => _submitForm(snapshot.data),
                              child: Text("Enregistrer"),
                            ),
                          )
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          );
        } else {
          return Scaffold(
            body: Center(
              child: Text("Problème de connexion !"),
            ),
          );
        }
      },
    );
  }

  void _showGenderDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Genre"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ListTile(
                title: Text("Homme"),
                onTap: () {
                  _genderController.text = "Homme";
                  Navigator.of(context).pop();
                },
              ),
              ListTile(
                title: Text("Femme"),
                onTap: () {
                  _genderController.text = "Femme";
                  Navigator.of(context).pop();
                },
              )
            ],
          ),
        );
      },
    );
  }

  void _showCountryPicker(BuildContext context) {
    showCountryPicker(
      context: context,
      showPhoneCode: false,
      onSelect: (Country country) {
        setState(() {
          _countryController.text = country.displayNameNoCountryCode;
        });
      },
    );
  }
}