import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:le_kiosque_by_gcs/model/magazine.dart';
import 'package:le_kiosque_by_gcs/ui/custom/item_mag_large.dart';
import 'package:le_kiosque_by_gcs/ui/view/search/item_mag_search.dart';

import 'item_mag_large_search.dart';

class SearchView extends StatefulWidget {
  @override
  _SearchViewState createState() => _SearchViewState();
}

class _SearchViewState extends State<SearchView> {
  bool _isGrid = false;

  @override
  Widget build(BuildContext context) {
    // TODO: Removing test data
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 65,
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(
          color: Color(0xFF545454), //change your color here
        ),
        title: SizedBox(
          height: 46,
          child: TextField(
            maxLines: 1,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(8),
              prefixIcon: Icon(
                Icons.search,
                color: Color(0xFF545454),
              ),
              hintText: 'Rechercher un article',
              border: OutlineInputBorder(
                borderRadius: const BorderRadius.all(
                  const Radius.circular(32.0),
                ),
                borderSide: BorderSide(
                  width: 0,
                  style: BorderStyle.none,
                ),
              ),
              filled: true,
              fillColor: Colors.grey[200],
            ),
          ),
        ),
      ),
      body: _isGrid ? _buildGrid() : _buildList(),
    );
  }

  Widget _buildList() {
    return ListView.builder(
      itemCount: magazinesTest.length + 1,
      itemBuilder: (context, index) {
        if (index == 0) {
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "Recherches récentes",
                  style: TextStyle(
                    fontSize: 22,
                    color: Color(0xFF3B3B3B),
                  ),
                ),
                InkWell(
                  onTap: () => _updateListAppearance(),
                  child: Icon(
                    _isGrid ? Icons.list : Icons.grid_view,
                  ),
                )
              ],
            ),
          );
        } else {
          return ItemMagazineSearch(
            magazine: magazinesTest[index - 1],
          );
        }
      },
    );
  }

  _updateListAppearance() {
    setState(() {
      _isGrid = !_isGrid;
    });
  }

  Widget _buildGrid() {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "Recherches récentes",
                  style: TextStyle(
                    fontSize: 22,
                    color: Color(0xFF3B3B3B),
                  ),
                ),
                InkWell(
                  onTap: () => _updateListAppearance(),
                  child: Icon(
                    _isGrid ? Icons.list : Icons.grid_view,
                  ),
                )
              ],
            ),
          ),
        ),
        SliverPadding(
          padding: EdgeInsets.all(16),
          sliver: SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 16.0,
              crossAxisSpacing: 16.0,
              mainAxisExtent: 250,
            ),
            delegate: SliverChildBuilderDelegate(
              (context, int index) =>
                  ItemMagLargeSearch(magazine: magazinesTest[index]),
              childCount: magazinesTest.length,
            ),
          ),
        ),
      ],
    );
  }
}