import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget{
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list),onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildRow(WordPair pair){
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: (){
        setState((){
          if (alreadySaved){
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context,i){
          if (i.isOdd) return new Divider();
          final index = i ~/2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(16));
          }
          return _buildRow(_suggestions[index]);
        }
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
      new MaterialPageRoute(
          builder: (context){
            final tiles = _saved.map(
                (pair){
                  return new ListTile(
                    title: new Text(
                      pair.asPascalCase,
                      style: _biggerFont,
                    ),
                  );
                },
            );

            final divided = ListTile
              .divideTiles(
                context: context,
                tiles: tiles,
              )
              .toList();

            return new Scaffold(
              appBar: new AppBar(
                title: new Text('Saved Suggestions'),
                actions: <Widget>[
                  new IconButton(icon: new Icon(Icons.list),onPressed: _nextTopics),
                ],
              ),
              body: new ListView(children: divided),
            );
          },
      ),
    );
  }

  void _nextTopics() {
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context){

          return new Scaffold(
            appBar: new AppBar(
              title: new Text('Next Topics - Layout'),
            ),
            body: _buildLayout(),
          );
        },
      ),
    );
  }

  Widget _buildLayout() {
    return new ListView(
      children: <Widget>[
        //
        // Account Section
        //
        new Container(
          padding: const EdgeInsets.all(20.0),
          color: const Color(0xFFEEEEEE),
          child: new Text(
            'Account',
            style: new TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          ),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.account_circle),
          title: new Text('Felix'),
          subtitle: new Text('felixkywong@gmail.com'),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.account_box),
          title: new Text('Personal Info'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.tune),
          title: new Text('Preferences'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.payment),
          title: new Text('Payments'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.check_circle_outline),
          title: new Text('Voice Match'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        //
        // Devices Section
        //
        new Container(
          padding: const EdgeInsets.all(20.0),
          color: const Color(0xFFEEEEEE),
          child: new Text(
            'Devices',
            style: new TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          ),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.phone_iphone),
          title: new Text('Phone'),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.speaker),
          title: new Text('Home'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.headset),
          title: new Text('LE-Incognito Bose QC 35II(F'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        //
        // Services Section
        //
        new Container(
          padding: const EdgeInsets.all(20.0),
          color: const Color(0xFFEEEEEE),
          child: new Text(
            'Services',
            style: new TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          ),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.music_note),
          title: new Text('Music'),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.lightbulb_outline),
          title: new Text('Home control'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.web),
          title: new Text('News'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.rounded_corner),
          title: new Text('Routines'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.cast),
          title: new Text('TVs and speakers'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.format_list_bulleted),
          title: new Text('Shopping list'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.format_list_bulleted),
          title: new Text('Purchases'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.format_list_bulleted),
          title: new Text('Reminders'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.comment),
          title: new Text('Shortcuts'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
        new ListTile(
          leading: new Icon(Icons.ondemand_video),
          title: new Text('Videos and photos'),
          trailing: new Icon(Icons.chevron_right),
        ),
        new Divider(color: Colors.grey),
      ],
    );
  }
/*
    return new Container(
      padding: const EdgeInsets.all(4.0),
      child: new Row(
        children: [
          new Container(
            padding: const EdgeInsets.all(20.0),
            decoration: const BoxDecoration(
              border: const Border(
                bottom: const BorderSide(width:1.0, color: const Color(0xFFF007F7F)),
              ),
            ),
            child: new Text(
              'Account',
              style: new TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
              ),
            ),
          ),
        ],
        ),
    );
*/



}