frosty/lib/screens/home/search/search.dart

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:frosty/api/twitch_api.dart';
import 'package:frosty/core/auth/auth_store.dart';
import 'package:frosty/screens/home/search/search_results_categories.dart';
import 'package:frosty/screens/home/search/search_results_channels.dart';
import 'package:frosty/screens/home/stores/search_store.dart';
import 'package:frosty/widgets/section_header.dart';
import 'package:provider/provider.dart';

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

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

class _SearchState extends State<Search> {
  late final _searchStore = SearchStore(
    authStore: context.read<AuthStore>(),
    twitchApi: context.read<TwitchApi>(),
  );

  final _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    const headerPadding = EdgeInsets.fromLTRB(15.0, 20.0, 15.0, 10.0);

    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
          child: TextField(
            controller: _textEditingController,
            autocorrect: false,
            decoration: InputDecoration(
              isDense: true,
              labelText: 'Find a channel or category',
              contentPadding: const EdgeInsets.all(10.0),
              border: const OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(15.0)),
              ),
              suffixIcon: IconButton(
                tooltip: 'Clear Search',
                onPressed: () {
                  FocusScope.of(context).unfocus();
                  setState(() {
                    _textEditingController.clear();
                  });
                },
                icon: const Icon(Icons.clear),
              ),
            ),
            onSubmitted: _searchStore.handleQuery,
          ),
        ),
        Expanded(
          child: Observer(
            builder: (context) {
              if (_textEditingController.text.isEmpty || _searchStore.channelFuture == null || _searchStore.categoryFuture == null) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    if (_searchStore.searchHistory.isNotEmpty)
                      const SectionHeader(
                        'History',
                        padding: headerPadding,
                        fontWeight: FontWeight.bold,
                      ),
                    Expanded(
                      child: ListView(
                        children: _searchStore.searchHistory
                            .mapIndexed(
                              (index, searchTerm) => ListTile(
                                leading: const Icon(Icons.history),
                                title: Text(searchTerm),
                                trailing: IconButton(
                                  tooltip: 'Remove',
                                  icon: const Icon(Icons.cancel),
                                  onPressed: () => setState(() {
                                    _searchStore.searchHistory.removeAt(index);
                                  }),
                                ),
                                onTap: () {
                                  setState(() {
                                    _textEditingController.text = searchTerm;
                                    _searchStore.handleQuery(searchTerm);
                                  });
                                },
                              ),
                            )
                            .toList(),
                      ),
                    ),
                  ],
                );
              }
              return CustomScrollView(
                slivers: [
                  const SliverToBoxAdapter(
                    child: SectionHeader(
                      'Channels',
                      padding: headerPadding,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SearchResultsChannels(
                    searchStore: _searchStore,
                    query: _textEditingController.text,
                  ),
                  const SliverToBoxAdapter(
                    child: SectionHeader(
                      'Categories',
                      padding: headerPadding,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SearchResultsCategories(searchStore: _searchStore),
                ],
              );
            },
          ),
        ),
      ],
    );
  }

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