import 'package:app_hit_a_wod/src/providers/auth.provider.dart';
import 'package:app_hit_a_wod/src/providers/snackbar.provider.dart';
import 'package:app_hit_a_wod/src/providers/user-subscriptions.provider.dart';
import 'package:app_hit_a_wod/src/styles.dart';
import 'package:app_hit_a_wod/src/utils/custom_datepicker/datepicker_neu.dart';
import 'package:app_hit_a_wod/src/utils/fontello/my_flutter_app_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

class ComponentsExamplePage extends StatefulWidget {
  const ComponentsExamplePage({Key key}) : super(key: key);

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

class _ComponentsExamplePageState extends State<ComponentsExamplePage> {
  bool isCheked = false;
  int _selectedIndex = 1;
  String dropdownValue = "A";
  SnackbarProvider _snack;
  DateTime selectedDate = DateTime.now();


  int size = 3;
  int currentPage = 1;

  @override
  Widget build(BuildContext context) {

    _snack = Provider.of<SnackbarProvider>(context);
    final _us_provider = Provider.of<UserSubscriptionsProvider>(context);
    final _auth = Provider.of<AuthProvider>(context);
    
    Future<Null> _selectDate(BuildContext context) async {
      final DateTime picked = await showNeuDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015),
        lastDate: DateTime(2101)
      );
      if (picked != null && picked != selectedDate) {
        setState(() {
          selectedDate = picked;
          print(picked);
        });
      }
    }

    return SingleChildScrollView(
      padding: EdgeInsets.all(20),
      child: Container(
        color: Colors.transparent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            NeumorphicButton(
              boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(30)),
              padding: EdgeInsets.symmetric(vertical: 20, horizontal: 30),
              style: NeumorphicStyle(
                color: colors['primary'],
                depth: neuDepth,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.security, color: colors["white"], size: 20),
                  SizedBox(width: 10),
                  Text("Cambiar contraseña", style: Theme.of(context).textTheme.display2)
                ],
              ),
              onClick: () {
                showPopup(
                  context,
                  neuInput(
                    TextFormField(
                      cursorColor: Color.fromRGBO(141, 39, 144, 1),
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Enter your username',
                      ),
                      onChanged: (text) {
                        print(text);
                      },
                      onFieldSubmitted: (text) {
                        print("YA ESTOY ILLO" + text);
                      },
                    ),
                  ), 
                  animationType: 'position-bottom',
                  position: 'center',
                  height: 300
                );
              }
            ),
            SizedBox(height: 10.0),
            Text('Container'),
            SizedBox(height: 10.0),
            neuContainer(
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(MyFlutterApp.warning),
                  SizedBox(width: 10,),
                  Icon(MyFlutterApp.kettlebell)
                ],
              ),
            ),
            SizedBox(height: 10.0),
            Text('Datepicker'),
            SizedBox(height: 10.0),
            SizedBox(height: 20.0,),
            neuDatePicker(
              NeumorphicButton(
                style: neuStylePressed(),
                boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(neuRounded)),
                child: Container(
                  color: Colors.transparent,
                  child: Text("${DateFormat('dd/MM/yyyy').format(selectedDate)}"),
                ),
                onClick: () {
                  setState(() {
                    _selectDate(context);
                  });
                }
              ),
            ),
            SizedBox(height: 10.0),
            Text('Buttons', style: Theme.of(context).textTheme.display4),
            SizedBox(height: 10.0),
            neuButton (
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                boxShape: neuBoxShape(),
                child: Text("Show success snackbar"),
                onClick: () {
                  _snack.success("Missatge de prova");
                },
              ),
            ),
            SizedBox(height: 10.0),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                child: Text("Show error snackbar"),
                onClick: () {
                  _snack.error("Missatge de prova");
                },
              ),
            ),
            SizedBox(height: 10.0),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                child: Text("Show warning snackbar"),
                onClick: () {
                  _snack.warning("Missatge de prova");
                },
              ),
            ),
            SizedBox(height: 10.0),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                child: Text("Print current user"),
                onClick: () {
                  final user = _auth.currentUser;
                  print(user);
                },
              ),
            ),
            SizedBox(height: 10.0),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                child: Text("Print current subscriptions"),
                onClick: () {
                  final asdf = _us_provider.currentSubscriptions;
                  print(asdf);
                },
              ),
            ),
            SizedBox(height: 10.0),
            NeumorphicButton(
              padding: EdgeInsets.all(20),
              style: neuButtonStyle(),
              child: Icon(Icons.navigation),
              onClick: () {

              }
            ),
            SizedBox(height: 10.0),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                child: Text("Show dialog"),
                onClick: () {
                  return neuDialog(
                    context: context,
                    child: Container(  
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text('Tonto quien lo lea'),
                          Container(
                            width: 320.0,
                            margin: EdgeInsets.all(10),
                            padding: EdgeInsets.all(10),
                            child: RaisedButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text(
                                "Lo he leido",
                                style: TextStyle(color: Colors.white),
                              ),
                              color: const Color(0xFF1BC0C5),
                            ),
                          )
                        ],
                      ),
                    )
                  );
                }
              ),
            ),
            SizedBox(height: 10.0),
            
            SizedBox(height: 10.0),
            neuButtonCircular(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                boxShape: NeumorphicBoxShape.circle(),
                child: Icon(Icons.navigation),
                onClick: () {}
              ),
            ),
            SizedBox(height: 10.0),
            Text('Button with color'),
            SizedBox(height: 10.0),
            Text("Headline", style: Theme.of(context).textTheme.headline),
            SizedBox(height: 10.0),
            Text("Title", style: Theme.of(context).textTheme.title),
            SizedBox(height: 10.0),
            Text("Subtitle", style: Theme.of(context).textTheme.subtitle),
            SizedBox(height: 10.0),
            Text("Overline", style: Theme.of(context).textTheme.overline),
            SizedBox(height: 10.0),
            Text("body1", style: Theme.of(context).textTheme.body1),
            SizedBox(height: 10.0),
            Text("display1", style: Theme.of(context).textTheme.display1),
            SizedBox(height: 10.0),
            Text("display2", style: Theme.of(context).textTheme.display2),
            SizedBox(height: 10.0),
            Text("display3", style: Theme.of(context).textTheme.display3),
            SizedBox(height: 10.0),
            Text("display4", style: Theme.of(context).textTheme.display4),
            SizedBox(height: 10.0),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                child: Icon(MyFlutterApp.haw, color: Colors.white),
                onClick: () {}
              ),
              colors: primaryShadow
            ),
            SizedBox(height: 10),
            neuButton(
              NeumorphicButton(
                boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(30)),
                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                style: NeumorphicStyle(
                  color: colors['primary'],
                  depth: neuDepth,
                ),
                child: Text("Editar perfil", style: Theme.of(context).textTheme.display2),
                onClick: () {}
              ),
              borderRadius: BorderRadius.circular(30)
            ),
            SizedBox(height: 10),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(30)),
                child: Text("Biometric Auth"),
                onClick: () { },
              ),
              borderRadius: BorderRadius.circular(30)
            ),
            SizedBox(height: 10.0),
            neuButtonCircular(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuButtonStyle(),
                boxShape: NeumorphicBoxShape.circle(),
                child: Icon(Icons.navigation, color: Colors.white),
                onClick: () {}
              ),
              colors: primaryShadow
            ),
            SizedBox(height: 10.0,),
            Text('Button presionado'),
            SizedBox(height: 10.0),
            neuButton(
              NeumorphicButton(
                padding: EdgeInsets.all(20),
                style: neuStylePressed(),
                child: Icon(MyFlutterApp.haw, color: Colors.white),
                onClick: () {}
              ),
            ),
            SizedBox(height: 10.0),
            Text('Switch'),
            SizedBox(height: 10.0),
            NeumorphicSwitch(
              value: isCheked,
              style: neuSwitchStyle(),
              onChanged: (value) {
                setState( () {
                  isCheked = value;
                });
              },
            ),
            SizedBox(height: 10.0),
            Text('Checkbox, si, lo se, no hay propiedad para cambiar ese color gris'),
            SizedBox(height: 10.0),
            NeumorphicCheckbox(
              value: isCheked,
              style: neuCheckboxStyle(),
              onChanged: (value) {
                setState(() {
                  isCheked = value;
                });
              },
            ),
            SizedBox(height: 10.0),
            Text('Toggle'),
            SizedBox(height: 10.0),
            NeumorphicToggle(
              style: NeumorphicToggleStyle(backgroundColor: neuColor, borderRadius: BorderRadius.circular(8)),
              height: 50.0,
              selectedIndex: _selectedIndex,
              displayForegroundOnlyIfSelected: true,
              children: [
                ToggleElement(
                  background: Center(
                    child: Text('1'),
                  ),
                  foreground: Center(
                    child: Text('1'),
                  )
                ),
                ToggleElement(
                  background: Center(
                    child: Text('2 no selected'),
                  ),
                  foreground: Center(
                    child: Text('2'),
                  ),
                ),
              ],
              thumb: Neumorphic(
                style: neuStyle(),
              ),
              onChanged: (value) {
                setState(() {
                  _selectedIndex = value;
                });
              },
            ),
            SizedBox(height: 10.0),
            Text('chip'),
            SizedBox(height: 10.0),
            neuChip(Text('Pasa un widget', style: TextStyle(color: Colors.white),)),
            SizedBox(height: 10.0),
            SizedBox(height: 10.0),
            neuChip(Text('Pasa un widget', style: TextStyle(color: Colors.white),), colors: secondaryShadow),
            SizedBox(height: 10.0),
            Text('widget con fondo degradado'),
            SizedBox(height: 10.0),
            shaderContainer(Text('Culo caca pedo pis', style: TextStyle(fontSize: 36)),'letter',[Colors.red, Colors.blue]),
            shaderContainer(Image.asset('assets/icon/logo.png', height: 100, width: 100,),'in'),
            shaderContainer(Image.asset('assets/icon/logo.png', height: 100, width: 100,),'out'),
            SizedBox(height: 10.0),
            Text('Input text'),
            SizedBox(height: 10.0),
            neuInput(
              TextFormField(
                cursorColor: Color.fromRGBO(141, 39, 144, 1),
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Enter your username',
                ),
                onChanged: (text) {
                  print(text);
                },
                onFieldSubmitted: (text) {
                  print("YA ESTOY ILLO" + text);
                },
              ),
            ),
            SizedBox(height: 10.0),
            Text('Input number'),
            SizedBox(height: 10.0),
            neuInput(
              TextFormField(
                cursorColor: Color.fromRGBO(141, 39, 144, 1),
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Enter your creditcard'
                ),
                onChanged: (text) {
                  print(text);
                },
                onFieldSubmitted: (text) {
                  print("YA ESTOY ILLO" + text);
                },
              ),
            ),
            SizedBox(height: 10.0),
            Text('Input password'),
            SizedBox(height: 10.0),
            neuInput(
              TextFormField(
                cursorColor: Color.fromRGBO(141, 39, 144, 1),
                keyboardType: TextInputType.text,
                obscureText: true,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  labelText: 'Enter your password'
                ),
                onChanged: (text) {
                  print(text);
                },
                onFieldSubmitted: (text) {
                  print("YA ESTOY ILLO" + text);
                },
              ),
            ),
            SizedBox(height: 10.0),
            Text('DropDown'),
            SizedBox(height: 10.0),
            neuContainer(
              DropdownButton<String>(
                hint: Text("Select Device"),
                value: dropdownValue,
                icon: Icon(Icons.arrow_drop_down, color: colors['primary'],),
                underline: Container(height: 0, width: 0,),
                items: <String>['A', 'B', 'C', 'D'].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (value) {
                  setState(() {
                    dropdownValue = value;
                    print(value);
                  });
                },
              )
            ),
            SizedBox(height: 10.0),
            Text('Botones paginación'),
            SizedBox(height: 10.0),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                NeumorphicButton(
                  style: neuStyleButtonPagination(currentPage>0),
                  isEnabled: (currentPage>0),
                  boxShape: NeumorphicBoxShape.roundRect(BorderRadius.only(topLeft: Radius.circular(neuRounded),bottomLeft: Radius.circular(neuRounded))),
                  child: Icon(MyFlutterApp.left_arrow),
                  onClick: () {
                    setState(() {  
                      currentPage--;
                      print(currentPage);
                      print(size);
                    });
                  },
                ),
                NeumorphicButton(
                  style: neuStyleButtonPagination(currentPage<size),
                  isEnabled: (currentPage<size),
                  boxShape: NeumorphicBoxShape.roundRect(BorderRadius.only(topRight: Radius.circular(neuRounded),bottomRight: Radius.circular(neuRounded))),
                  child: Icon(MyFlutterApp.right_arrow),
                  onClick: () {
                    setState(() {
                      currentPage++;
                      print(currentPage);
                      print(size);
                    });
                  },
                ),
              ],
            )
          ]
        )
      ),
    );
  }
}