import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:invoiceninja_flutter/ui/app/app_scaffold.dart';
import 'package:invoiceninja_flutter/redux/dashboard/dashboard_actions.dart';
import 'package:invoiceninja_flutter/data/models/stub_model.dart';
import 'package:invoiceninja_flutter/ui/app/list_filter.dart';
import 'package:invoiceninja_flutter/ui/app/list_filter_button.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/ui/stub/stub_list_vm.dart';
import 'package:invoiceninja_flutter/redux/stub/stub_actions.dart';
import 'package:invoiceninja_flutter/ui/app/app_drawer_vm.dart';
import 'package:invoiceninja_flutter/ui/app/app_bottom_bar.dart';
import 'package:invoiceninja_flutter/ui/app/entities/entity_actions_dialog.dart';

class StubScreen extends StatelessWidget {
  const StubScreen({
    Key key,
    @required this.viewModel,
  }) : super(key: key);

  static const String route = '/stub';

  final StubScreenVM viewModel;

  @override
  Widget build(BuildContext context) {
    final store = StoreProvider.of<AppState>(context);
    final state = store.state;
    final company = state.selectedCompany;
    final localization = AppLocalization.of(context);
    final listUIState = state.uiState.stubUIState.listUIState;
    final isInMultiselect = listUIState.isInMultiselect();

    return AppScaffold(
                      isChecked: isInMultiselect &&
                          listUIState.selectedIds.length == viewModel.stubList.length,
                      showCheckbox: isInMultiselect,
                      onCheckboxChanged: (value) {
                        final stubs = viewModel.stubList
                            .map<StubEntity>((stubId) => viewModel.stubMap[stubId])
                            .where((stub) => value != listUIState.isSelected(stub))
                            .toList();
                
                        viewModel.onEntityAction(
                            context, stubs, EntityAction.toggleMultiselect);
                      },
                     appBarTitle: ListFilter(
                       key: ValueKey(state.stubListState.filterClearedAt),
                       entityType: EntityType.stub,
                       onFilterChanged: (value) {
                         store.dispatch(FilterStubs(value));
                       },
                     ),
                     appBarActions: [
                        if (!viewModel.isInMultiselect)
                          ListFilterButton(
                            entityType: EntityType.stub,
                            onFilterPressed: (String value) {
                              store.dispatch(FilterStubs(value));
                            },
                          ),
                        if (viewModel.isInMultiselect)
                          FlatButton(
                            key: key,
                            child: Text(
                              localization.cancel,
                              style: TextStyle(color: Colors.white),
                            ),
                            onPressed: () {
                              store.dispatch(ClearStubMultiselect(context: context));
                            },
                          ),
                        if (viewModel.isInMultiselect)
                          FlatButton(
                            key: key,
                            textColor: Colors.white,
                            disabledTextColor: Colors.white54,
                            child: Text(
                              localization.done,
                            ),
                            onPressed: state.stubListState.selectedIds.isEmpty
                                ? null
                                : () async {
                                    await showEntityActionsDialog(
                                        entities: state.stubListState.selectedIds,
                                        userCompany: userCompany,
                                        context: context,
                                        onEntityAction: viewModel.onEntityAction,
                                        multiselect: true);
                                    store.dispatch(ClearStubMultiselect(context: context));
                                  },
                          ),
                   ],
                   body: StubListBuilder(),
                   bottomNavigationBar: AppBottomBar(
                     entityType: EntityType.stub,
                     onSelectedSortField: (value) => store.dispatch(SortStubs(value)),
                     customValues1: company.getCustomFieldValues(CustomFieldType.stub1,
                         excludeBlank: true),
                     customValues2: company.getCustomFieldValues(CustomFieldType.stub2,
                         excludeBlank: true),
                     onSelectedCustom1: (value) =>
                         store.dispatch(FilterStubsByCustom1(value)),
                     onSelectedCustom2: (value) =>
                         store.dispatch(FilterStubsByCustom2(value)),
                     sortFields: [
                       StubFields.updatedAt,
                     ],
                     onSelectedState: (EntityState state, value) {
                       store.dispatch(FilterStubsByState(state));
                     },
                   ),
                   floatingActionButton: user.canCreate(EntityType.stub)
                       ? FloatingActionButton(
                           heroTag: 'stub_fab',
                           backgroundColor: Theme.of(context).primaryColorDark,
                           onPressed: () {
                             store.dispatch(
                                 EditStub(stub: StubEntity(), context: context));
                           },
                           child: Icon(
                             Icons.add,
                             color: Colors.white,
                           ),
                           tooltip: localization.newStub,
                         )
                       : null,
                 );
  }
}