import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'global_helper_functions.dart';
import 'timezones.dart';

class TimeZone extends StatefulWidget {
  final int timeOffSet;
  final int timeOffSetTime;
  final int isAutoTimeOffSet;

  final ValueChanged<int> parentAction;

  TimeZone({
    Key key,
    this.timeOffSet,
    this.timeOffSetTime,
    this.parentAction,
    this.isAutoTimeOffSet,
  }) : super(key: key);

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

class _TimeZoneState extends State<TimeZone> {
  @override
  Widget build(BuildContext context) {
    int _localOffSet = 5;
    final int now = newTimeStamp();
    final int elapsedHours = ((now - widget.timeOffSetTime) / 3600).round();
    final String offSet = (widget.timeOffSet < 0)
        ? '(UTC${widget.timeOffSet})'
        : '(UTC+${widget.timeOffSet})';
    final double textHeight = 1.5;

    return Row(
      children: <Widget>[
        Expanded(
          flex: 7,
          child: InkWell(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Time Offset:',
                    style: TextStyle(
                      height: textHeight,
                      color: candyApple,
                      fontSize: 16,
                    ),
                  ),
                  RichText(
                    text: TextSpan(
                      children: <TextSpan>[
                        TextSpan(
                          text: (widget.timeOffSet != 2000)
                              ? '$offSet'
                              : 'INVALID',
                          style: TextStyle(
                            height: textHeight,
                            color: Colors.black,
                            fontSize: 16,
                          ),
                        ),
                        TextSpan(
                          text: (widget.timeOffSet != 2000) ? ' minutes, ' : '',
                          style: TextStyle(
                            height: textHeight,
                            color: Colors.black,
                            fontSize: 16,
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                      ],
                    ),
                  ),
                  RichText(
                    text: TextSpan(
                      children: <TextSpan>[
                        TextSpan(
                          text: (widget.isAutoTimeOffSet == 1)
                              ? 'as of'
                              : 'MANUAL SETTING',
                          style: TextStyle(
                            height: textHeight,
                            color: candyApple,
                            fontSize: 16,
                          ),
                        ),
                        TextSpan(
                          text: (widget.isAutoTimeOffSet == 1)
                              ? ' $elapsedHours'
                              : '',
                          style: TextStyle(
                            height: textHeight,
                            color: Colors.black,
                            fontSize: 16,
                          ),
                        ),
                        TextSpan(
                          text: (widget.isAutoTimeOffSet == 1) ? ' hrs' : '',
                          style: TextStyle(
                            height: textHeight,
                            color: Colors.black,
                            fontSize: 16,
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                        TextSpan(
                          text: (widget.isAutoTimeOffSet == 1) ? ' ago' : '',
                          style: TextStyle(
                            height: textHeight,
                            color: Colors.black,
                            fontSize: 16,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              onTap: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    final FixedExtentScrollController scrollController =
                        FixedExtentScrollController(
                            initialItem: _getTimeZoneListIndex());
                    return AlertDialog(
                      backgroundColor: ivory,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(6.0)),
                      ),
                      content:
                          Column(mainAxisSize: MainAxisSize.min, children: <
                              Widget>[
                        ButtonTheme(
                          height: 75,
                          shape: RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(6.0)),
                          ),
                          child: RaisedButton(
                            onPressed: () {
                              if (!mounted) {
                                return;
                              } else {
                                Navigator.of(context).pop();
                                if (_localOffSet != 5) {
                                  widget.parentAction(_localOffSet);
                                }
                              }
                            },
                            color: candyApple,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Icon(
                                  Icons.save,
                                  size: 48.0,
                                  color: Colors.white,
                                ),
                                Text(
                                  'save tz offset',
                                  style: TextStyle(
                                    height: textHeight,
                                    color: Colors.white,
                                    fontSize: 24,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Container(
                          height: (MediaQuery.of(context).size.height * .5),
                          child: CupertinoPicker(
                            scrollController: scrollController,
                            backgroundColor: ivory,
                            itemExtent: 100,
                            looping: true,
                            onSelectedItemChanged: (int index) {
                              if (!mounted) {
                                return;
                              } else {
                                setState(() {
                                  _localOffSet = timeZoneList[index]['offset'];
                                });
                              }
                            },
                            children: List<Widget>.generate(timeZoneList.length,
                                (int index) {
                              return Column(
                                children: <Widget>[
                                  Container(
                                    height: 10,
                                    color: ivory,
                                  ),
                                  Container(
                                    alignment: Alignment(0.0, 0.0),
                                    height: 80,
                                    width: (MediaQuery.of(context).size.width *
                                        .9),
                                    decoration: BoxDecoration(
                                      color: peacockBlue,
                                      border: Border.all(
                                        width: 2.0,
                                      ),
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(6.0)),
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,
                                      children: <Widget>[
                                        Text(
                                          _parseTimeZoneOffSet(
                                              timeZoneList[index]['offset']),
                                          style: TextStyle(
                                            height: textHeight,
                                            color: Colors.white,
                                            fontSize: 24,
                                          ),
                                        ),
                                        Text(
                                          '${timeZoneList[index]['tz']}',
                                          style: TextStyle(
                                            height: textHeight,
                                            color: Colors.white,
                                            fontSize: 24,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    height: 10,
                                    color: ivory,
                                  ),
                                ],
                              );
                            }),
                          ),
                        ),
                      ]),
                    );
                  },
                );
              }),
        ),
        Expanded(
          flex: 3,
          child: Container(
            decoration: BoxDecoration(
              border: Border(
                left: BorderSide(
                  width: 1.0,
                  color: Colors.black,
                ),
              ),
            ),
            child: InkWell(
              child: Icon(
                Icons.info,
                size: 48.0,
                color: Colors.black,
              ),
              /*
              onTap: () {
                urlLaunch('https://en.wikipedia.org/wiki/List_of_time_zone_abbreviations');
              }
              */
              onTap: () {
                showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        backgroundColor: ivory,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(6.0)),
                        ),
                        content: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Text(
                              'The timezone offset should be set and refreshed automatically, '
                              'by querying an api from teleport. However, because the api is '
                              'free, the query is only refreshed once a week.\n'
                              'Additionally, in some cases the result is invalid. Tap the '
                              'left side of TimeZone Widget to manually set the timezone offset.',
                              textAlign: TextAlign.center,
                            ),
                            Container(
                              margin: EdgeInsets.only(
                                top: 40,
                                bottom: 10,
                              ),
                              child: ButtonTheme(
                                height: 75,
                                shape: RoundedRectangleBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(6.0)),
                                ),
                                child: RaisedButton(
                                    color: peacockBlue,
                                    child: Column(
                                      children: <Widget>[
                                        Container(
                                          width: 150,
                                          margin: EdgeInsets.only(
                                            top: 10,
                                          ),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceAround,
                                            children: <Widget>[
                                              Text(
                                                'List',
                                                style: TextStyle(
                                                  height: textHeight,
                                                  color: Colors.white,
                                                  fontSize: 24,
                                                ),
                                              ),
                                              Icon(
                                                Icons.open_in_browser,
                                                size: 48,
                                                color: Colors.white,
                                              ),
                                            ],
                                          ),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(
                                            bottom: 15,
                                          ),
                                          child: Text(
                                            'Of TimeZones',
                                            style: TextStyle(
                                              height: textHeight,
                                              color: Colors.white,
                                              fontSize: 24,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    onPressed: () {
                                      Navigator.of(context).pop();
                                      urlLaunch(
                                          'https://en.wikipedia.org/wiki/List_of_time_zone_abbreviations');
                                    }),
                              ),
                            ),
                          ],
                        ),
                      );
                    });
              },
            ),
          ),
        ),
      ],
    );
  }

  int _getTimeZoneListIndex() {
    // 2001 is a magic number which means auto
    // as in the tz offset is automatically set
    return timeZoneList.indexOf(timeZoneList.singleWhere((timeZone) =>
        timeZone['offset'] ==
        ((widget.isAutoTimeOffSet == 1) ? 2001 : widget.timeOffSet)));
  }

  String _parseTimeZoneOffSet(int offset) {
    if (offset < 2000) {
      return offset.toString();
    } else if (offset == 2000) {
      return 'INVALID';
    } else if (offset == 2001) {
      return 'AUTO';
    }
  }
}