import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';
import 'package:provider/provider.dart';

import '../../domain/entities/song.dart';
import '../state/audio_store.dart';
import '../state/music_data_store.dart';
import '../theming.dart';
import '../widgets/song_info.dart';
import '../widgets/song_list_tile.dart';

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

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

class _SongsPageState extends State<SongsPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    print('SongsPage.build');
    final MusicDataStore musicDataStore = Provider.of<MusicDataStore>(context);
    final AudioStore audioStore = Provider.of<AudioStore>(context);

    super.build(context);
    return Observer(builder: (_) {
      print('SongsPage.build -> Observer.builder');

      final songStream = musicDataStore.songStream;

      switch (songStream.status) {
        case StreamStatus.active:
          final List<Song> songs = songStream.value;
          return ListView.separated(
            itemCount: songs.length,
            itemBuilder: (_, int index) {
              final Song song = songs[index];
              return SongListTile(
                song: song,
                inAlbum: false,
                onTap: () => audioStore.playSong(index, songs),
                onTapMore: () => _openBottomSheet(song),
              );
            },
            separatorBuilder: (BuildContext context, int index) => const Divider(
              height: 4.0,
            ),
          );
        case StreamStatus.waiting:
        case StreamStatus.done:
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
              CircularProgressIndicator(),
              Text('Loading items...'),
            ],
          );
      }
      return Container();
    });
  }

  @override
  bool get wantKeepAlive => true;

  void _openBottomSheet(Song song) {
    final AudioStore audioStore = Provider.of<AudioStore>(context, listen: false);
    final MusicDataStore musicDataStore = Provider.of<MusicDataStore>(context, listen: false);

    showModalBottomSheet(
        context: context,
        useRootNavigator: true,
        backgroundColor: DARK2,
        builder: (context) {
          return Container(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 2,
                  color: LIGHT1,
                ),
                ListTile(
                  title: const Text('Play next'),
                  onTap: () {
                    audioStore.playNext(song);
                    Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: const Text('Add to queue'),
                  onTap: () {
                    audioStore.addToQueue(song);
                    Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: song.blocked ? const Text('Unblock song') : const Text('Block song'),
                  onTap: () {
                    musicDataStore.setSongBlocked(song, !song.blocked);
                    Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: const Text('Show song info'),
                  onTap: () {
                    Navigator.pop(context);
                    showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return SimpleDialog(
                            backgroundColor: DARK3,
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.all(HORIZONTAL_PADDING),
                                child: SongInfo(song),
                              ),
                              SimpleDialogOption(
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                                child: const Text(
                                  'Close',
                                  textAlign: TextAlign.right,
                                ),
                              ),
                            ],
                          );
                        });
                  },
                ),
              ],
            ),
          );
        });
  }
}