import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tsacdop/widgets/general_dialog.dart';

import '../state/audio_state.dart';
import '../type/episodebrief.dart';
import '../type/playlist.dart';
import '../util/extension_helper.dart';

class PlaylistDetail extends StatefulWidget {
  final Playlist playlist;
  PlaylistDetail(this.playlist, {Key key}) : super(key: key);

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

class _PlaylistDetailState extends State<PlaylistDetail> {
  final List<EpisodeBrief> _selectedEpisodes = [];
  bool _resetSelected;

  @override
  void initState() {
    _resetSelected = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final s = context.s;
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          splashRadius: 20,
          icon: Icon(Icons.close),
          tooltip: context.s.back,
          onPressed: () {
            Navigator.maybePop(context);
          },
        ),
        title: Text(_selectedEpisodes.isEmpty
            ? widget.playlist.name
            : '${_selectedEpisodes.length} selected'),
        actions: [
          if (_selectedEpisodes.isNotEmpty)
            IconButton(
                splashRadius: 20,
                icon: Icon(Icons.delete_outline_rounded),
                onPressed: () {
                  context.read<AudioPlayerNotifier>().removeEpisodeFromPlaylist(
                      widget.playlist,
                      episodes: _selectedEpisodes);
                  setState(_selectedEpisodes.clear);
                }),
          if (_selectedEpisodes.isNotEmpty)
            IconButton(
                splashRadius: 20,
                icon: Icon(Icons.select_all_outlined),
                onPressed: () {
                  setState(() {
                    _selectedEpisodes.clear();
                    _resetSelected = !_resetSelected;
                  });
                }),
          IconButton(
            splashRadius: 20,
            icon: Icon(Icons.more_vert),
            onPressed: () => generalSheet(context,
                    title: widget.playlist.name,
                    child: _PlaylistSetting(widget.playlist))
                .then((value) {
              if (!context
                  .read<AudioPlayerNotifier>()
                  .playlists
                  .contains(widget.playlist)) {
                Navigator.pop(context);
              }
              setState(() {});
            }),
          ),
          //SizedBox(
          //  height: 40,
          //  width: 40,
          //  child: Material(
          //    color: Colors.transparent,
          //    borderRadius: BorderRadius.circular(100),
          //    clipBehavior: Clip.hardEdge,
          //    child: SizedBox(
          //      height: 40,
          //      width: 40,
          //      child: PopupMenuButton<int>(
          //          icon: Icon(Icons.more_vert),
          //          shape: RoundedRectangleBorder(
          //              borderRadius: BorderRadius.circular(10)),
          //          elevation: 1,
          //          tooltip: s.menu,
          //          itemBuilder: (context) => [
          //                PopupMenuItem(value: 1, child: Text('Clear all')),
          //              ],
          //          onSelected: (value) {
          //            if (value == 1) {
          //              context
          //                  .read<AudioPlayerNotifier>()
          //                  .clearPlaylist(widget.playlist);
          //            }
          //          }),
          //    ),
          //  ),
          //)
        ],
      ),
      body: Selector<AudioPlayerNotifier, List<Playlist>>(
          selector: (_, audio) => audio.playlists,
          builder: (_, data, __) {
            final playlist = data.firstWhere((e) => e == widget.playlist);
            final episodes = playlist.episodes;
            return ReorderableListView(
                onReorder: (oldIndex, newIndex) {
                  context.read<AudioPlayerNotifier>().reorderEpisodesInPlaylist(
                      widget.playlist,
                      oldIndex: oldIndex,
                      newIndex: newIndex);
                  setState(() {});
                },
                scrollDirection: Axis.vertical,
                children: episodes.map<Widget>((episode) {
                  return _PlaylistItem(episode,
                      key: ValueKey(episode.enclosureUrl), onSelect: (episode) {
                    _selectedEpisodes.add(episode);
                    setState(() {});
                  }, onRemove: (episode) {
                    _selectedEpisodes.remove(episode);
                    setState(() {});
                  }, reset: _resetSelected);
                }).toList());
          }),
    );
  }
}

class _PlaylistItem extends StatefulWidget {
  final EpisodeBrief episode;
  final bool reset;
  final ValueChanged<EpisodeBrief> onSelect;
  final ValueChanged<EpisodeBrief> onRemove;
  _PlaylistItem(this.episode,
      {@required this.onSelect, @required this.onRemove, this.reset, Key key})
      : super(key: key);

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

class __PlaylistItemState extends State<_PlaylistItem>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;
  double _fraction;

  @override
  void initState() {
    super.initState();
    _fraction = 0;
    _controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 500));
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
      ..addListener(() {
        if (mounted) {
          setState(() => _fraction = _animation.value);
        }
      });
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.stop();
      } else if (status == AnimationStatus.dismissed) {
        _controller.stop();
      }
    });
  }

  @override
  void didUpdateWidget(covariant _PlaylistItem oldWidget) {
    if (oldWidget.reset != widget.reset && _animation.value == 1.0) {
      _controller.reverse();
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget _episodeTag(String text, Color color) {
    if (text == '') {
      return Center();
    }
    return Container(
      decoration: BoxDecoration(
          color: color, borderRadius: BorderRadius.circular(15.0)),
      height: 25.0,
      margin: EdgeInsets.only(right: 10.0),
      padding: EdgeInsets.symmetric(horizontal: 8.0),
      alignment: Alignment.center,
      child: Text(text, style: TextStyle(fontSize: 14.0, color: Colors.black)),
    );
  }

  @override
  Widget build(BuildContext context) {
    final s = context.s;
    final episode = widget.episode;
    final c = episode.backgroudColor(context);
    return SizedBox(
        height: 90.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Expanded(
              child: ListTile(
                contentPadding: EdgeInsets.symmetric(vertical: 8),
                onTap: () {
                  if (_fraction == 0) {
                    _controller.forward();
                    widget.onSelect(episode);
                  } else {
                    _controller.reverse();
                    widget.onRemove(episode);
                  }
                },
                title: Container(
                  padding: EdgeInsets.fromLTRB(0, 5.0, 20.0, 5.0),
                  child: Text(
                    episode.title,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                leading: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.unfold_more, color: c),
                    Transform(
                      alignment: FractionalOffset.center,
                      transform: Matrix4.identity()
                        ..setEntry(3, 2, 0.001)
                        ..rotateY(math.pi * _fraction),
                      child: _fraction < 0.5
                          ? CircleAvatar(
                              backgroundColor: c.withOpacity(0.5),
                              backgroundImage: episode.avatarImage)
                          : CircleAvatar(
                              backgroundColor:
                                  context.accentColor.withAlpha(70),
                              child: Transform(
                                  alignment: FractionalOffset.center,
                                  transform: Matrix4.identity()
                                    ..setEntry(3, 2, 0.001)
                                    ..rotateY(math.pi),
                                  child: Icon(Icons.done)),
                            ),
                    ),
                  ],
                ),
                subtitle: Container(
                  padding: EdgeInsets.only(top: 5, bottom: 5),
                  height: 35,
                  child: Row(
                    children: <Widget>[
                      if (episode.explicit == 1)
                        Container(
                            decoration: BoxDecoration(
                                color: Colors.red[800], shape: BoxShape.circle),
                            height: 25.0,
                            width: 25.0,
                            margin: EdgeInsets.only(right: 10.0),
                            alignment: Alignment.center,
                            child: Text('E',
                                style: TextStyle(color: Colors.white))),
                      if (episode.duration != 0)
                        _episodeTag(
                            episode.duration == 0
                                ? ''
                                : s.minsCount(episode.duration ~/ 60),
                            Colors.cyan[300]),
                      if (episode.enclosureLength != null)
                        _episodeTag(
                            episode.enclosureLength == 0
                                ? ''
                                : '${(episode.enclosureLength) ~/ 1000000}MB',
                            Colors.lightBlue[300]),
                    ],
                  ),
                ),
              ),
            ),
            Divider(
              height: 2,
            ),
          ],
        ));
  }
}

class _PlaylistSetting extends StatefulWidget {
  final Playlist playlist;
  _PlaylistSetting(this.playlist, {Key key}) : super(key: key);

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

class __PlaylistSettingState extends State<_PlaylistSetting> {
  bool _clearConfirm;
  bool _removeConfirm;

  @override
  void initState() {
    _clearConfirm = false;
    _removeConfirm = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final s = context.s;
    final textStyle = context.textTheme.bodyText2;
    return Column(
      children: [
        ListTile(
          onTap: () {
            setState(() => _clearConfirm = true);
          },
          dense: true,
          title: Row(
            children: [
              Icon(Icons.highlight_off, size: 18),
              SizedBox(width: 20),
              Text('Clear all', style: textStyle),
            ],
          ),
        ),
        if (_clearConfirm)
          Container(
            width: double.infinity,
            color: context.primaryColorDark,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                FlatButton(
                  onPressed: () => setState(() {
                    _clearConfirm = false;
                  }),
                  child:
                      Text(s.cancel, style: TextStyle(color: Colors.grey[600])),
                ),
                FlatButton(
                    splashColor: Colors.red.withAlpha(70),
                    onPressed: () async {
                      context
                          .read<AudioPlayerNotifier>()
                          .clearPlaylist(widget.playlist);
                      Navigator.of(context).pop();
                    },
                    child:
                        Text(s.confirm, style: TextStyle(color: Colors.red))),
              ],
            ),
          ),
        if (widget.playlist.name != 'Queue')
          ListTile(
            onTap: () {
              setState(() => _removeConfirm = true);
            },
            dense: true,
            title: Row(
              children: [
                Icon(Icons.delete, color: Colors.red, size: 18),
                SizedBox(width: 20),
                Text('Remove playlist',
                    style: textStyle.copyWith(
                        color: Colors.red, fontWeight: FontWeight.bold)),
              ],
            ),
          ),
        if (_removeConfirm)
          Container(
            width: double.infinity,
            color: context.primaryColorDark,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                FlatButton(
                  onPressed: () => setState(() {
                    _removeConfirm = false;
                  }),
                  child:
                      Text(s.cancel, style: TextStyle(color: Colors.grey[600])),
                ),
                FlatButton(
                    splashColor: Colors.red.withAlpha(70),
                    onPressed: () async {
                      context
                          .read<AudioPlayerNotifier>()
                          .deletePlaylist(widget.playlist);
                      Navigator.of(context).pop();
                    },
                    child:
                        Text(s.confirm, style: TextStyle(color: Colors.red))),
              ],
            ),
          ),
      ],
    );
  }
}