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

class GlobalState {
  String name;

  GlobalState({
    @required this.name,
  });
}

class NameSetAction extends ReduxAction<GlobalState> {
  final String newName;

  NameSetAction({@required this.newName}) : assert(newName != null);

  @override
  GlobalState reduce() {
    state.name = newName;
    return state;
  }
}

GlobalState initialState = new GlobalState(
    name: '',
  );

var store = Store<GlobalState>(initialState: initialState);

void main() {
  runApp(Gmus(store: store));
}

class Gmus extends StatelessWidget {
  final Store<GlobalState> store;

  Gmus({
    Key key,
    @required this.store,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => StoreProvider<GlobalState>(
      store: this.store,
      child: MaterialApp(
        title: 'gmus-mobile',
        home: GmusConnector(),
      ),
  );
}

class GmusConnector extends StatelessWidget {
  GmusConnector({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<GlobalState, ViewModel>(
        vm: () => Factory(this),
        builder: (BuildContext context, ViewModel vm) => GmusHome(
            state: vm.state,
            onSetName: vm.onSetName,
          ),
    );
  }
}

class Factory extends VmFactory<GlobalState, GmusConnector> {
  Factory(widget) : super(widget);

  @override
  ViewModel fromStore() => ViewModel(
      state: state,
      onSetName: (String newName) => dispatch(NameSetAction(newName: newName)),
    );
}

class ViewModel extends Vm {
  final GlobalState state;
  final Function(String) onSetName;

  ViewModel({
    @required this.state,
    @required this.onSetName,
  }) : super(equals: [state]);
}

class GmusHome extends StatelessWidget {
  final GlobalState state;
  final Function(String) onSetName;

  GmusHome({
    Key key,
    this.state,
    this.onSetName,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title: Text('gmus'),
            ),
          body: Center(
              child: Text("name: ${this.state.name}"),
            ),
      );
  }
}