import 'dart:async';

import 'package:flutter/material.dart';
import 'package:touch_demonstrator/src/blocs/BlocProvider.dart';

import 'package:touch_demonstrator/model/touchData.dart';
import 'package:touch_demonstrator/src/blocs/bluetoothBloc.dart';

class DebugView extends StatefulWidget {
  /// Screen that shows RAW data from the bluetooth device
  @override
  _DebugViewState createState() => _DebugViewState();
}

class _DebugViewState extends State<DebugView> {
  ScrollController _scrollController;
  static const TextStyle textStyleWhite = TextStyle(color: Colors.white);
  static const TextStyle textStyleBlack = TextStyle(color: Colors.black);

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

  void _scrollList() {
    Future.delayed(Duration(milliseconds: 50), () {
      _scrollController.animateTo(_scrollController.position.maxScrollExtent,
          duration: new Duration(milliseconds: 500), curve: Curves.easeOut);
    });
  }

  @override
  Widget build(BuildContext context) {
    final BluetoothBloc bloc = BlocProvider.of(context).bluetoothBlocGetter;
    return Scaffold(
      appBar: AppBar(
        title: Text('Debug View Page'),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            _buildHeaderDebugPage(context),
//            Divider(),
            StreamBuilder<List<TouchData>>(
                key: Key('ListTouchData'),
                stream: bloc.getHistory$,
                builder: (BuildContext context,
                    AsyncSnapshot<List<TouchData>> snapshot) {
                  if (snapshot.hasData) {
                    _scrollList();
                    print('${snapshot.data.length}');
                    Color colorOfContainer;
                    return Expanded(
                        child: SizedBox(
                      height: 50.0,
                      child: ListView.builder(
                          reverse: false,
                          controller: _scrollController,
                          scrollDirection: Axis.vertical,
                          itemCount: snapshot.data.length,
                          itemExtent: 33.0,
                          itemBuilder: (context, i) {
                            return buildRowOfTouchData(
                                colorOfContainer, i, snapshot);
                          }),
                    ));
                  } else {
                    return Container();
                  }
                }),
          ],
        ),
      ),
    );
  }

  Container _buildHeaderDebugPage(BuildContext context) {
    return Container(
      color: Theme.of(context).accentColor,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            debugListItem('#', flexItem: 1),
            debugListItem('Finger'),
            debugListItem('Event'),
            debugListItem('X'),
            debugListItem('Y'),
          ],
        ),
      ),
    );
  }

  Container buildRowOfTouchData(Color colorOfContainer, int _index,
      AsyncSnapshot<List<TouchData>> snapshot) {
    var _textStyleDebug;
    var _fingerNrText = '${snapshot.data[_index].fingerNumber}';
    var _eventText;
    var _xText = '${snapshot.data[_index].x.toString().padLeft(4, ' ')}';
    var _yText = '${snapshot.data[_index].y.toString().padLeft(4, ' ')}';

    if ((snapshot.data[_index].event) == 1) {
      _eventText = 'MOVE';
      _textStyleDebug = textStyleBlack;
      colorOfContainer = Colors.white;
    } else {
      _textStyleDebug = textStyleWhite;
      if ((snapshot.data[_index].event) == 4) {
        colorOfContainer = Colors.teal;
        _eventText = 'DOWN';
      } else if((snapshot.data[_index].event) == 5){
        _eventText = 'UP';
        colorOfContainer = Colors.purple;
      } else {
        print('Default ${snapshot.data[_index]}');
        return Container();
      }
    }


    return Container(
      color: colorOfContainer,
      child: Row(
        children: <Widget>[
          debugListItem('$_index', flexItem: 1, styleText: _textStyleDebug),
          debugListItem(_fingerNrText, styleText: _textStyleDebug),
          debugListItem(_eventText, styleText: _textStyleDebug),
          debugListItem(_xText, styleText: _textStyleDebug),
          debugListItem(_yText, styleText: _textStyleDebug),
        ],
      ),
    );
  }

  Expanded debugListItem(String textItem,
      {int flexItem = 2, TextStyle styleText = textStyleWhite}) {
    return Expanded(
      flex: flexItem,
      child: Center(
        child: Text(textItem, style: styleText),
      ),
    );
  }
}