import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:f0ckapp/services/api_service.dart';
import 'package:f0ckapp/widgets/media_tile.dart';
import 'package:f0ckapp/widgets/end_drawer.dart';
import 'package:f0ckapp/widgets/filter_bar.dart';
import 'package:f0ckapp/utils/customsearchdelegate_util.dart';

class MediaGrid extends StatefulWidget {
  const MediaGrid({super.key});

  @override
  State<StatefulWidget> createState() => _MediaGrid();
}

class _MediaGrid extends State<MediaGrid> {
  final ApiService apiService = Get.find<ApiService>();
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() async {
      if (_scrollController.position.pixels >=
          _scrollController.position.maxScrollExtent - 300) {
        await apiService.fetchMedia();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: EndDrawer(),
      persistentFooterButtons: [
        Obx(() {
          if (apiService.tag.value != null) {
            return Center(
              child: InputChip(
                label: Text(apiService.tag.value!),
                onDeleted: () {
                  apiService.setTag(null);
                  Get.offAllNamed('/');
                },
              ),
            );
          } else {
            return SizedBox.shrink();
          }
        }),
      ],
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverAppBar(
            floating: true,
            snap: true,
            title: GestureDetector(
              onTap: () async {
                apiService.setTag(null);
              },
              child: Row(
                children: [
                  Image.asset(
                    'assets/images/f0ck_small.webp',
                    fit: BoxFit.fitHeight,
                  ),
                  const SizedBox(width: 10),
                  const Text('fApp', style: TextStyle(fontSize: 24)),
                ],
              ),
            ),
            actions: [
              IconButton(
                icon: const Icon(Icons.search),
                onPressed: () async {
                  await showSearch(
                    context: context,
                    delegate: CustomSearchDelegate(),
                  );
                },
              ),
              Obx(
                () => IconButton(
                  icon: Icon(
                    apiService.random.value
                        ? Icons.shuffle_on_outlined
                        : Icons.shuffle,
                  ),
                  onPressed: () {
                    apiService.toggleRandom();
                  },
                ),
              ),
              Builder(
                builder: (context) {
                  return IconButton(
                    icon: const Icon(Icons.menu),
                    onPressed: () {
                      Scaffold.of(context).openEndDrawer();
                    },
                  );
                },
              ),
            ],
          ),
          SliverPadding(
            padding: EdgeInsets.zero,
            sliver: Obx(
              () => SliverGrid(
                delegate: SliverChildBuilderDelegate((context, index) {
                  return MediaTile(item: apiService.mediaItems[index]);
                }, childCount: apiService.mediaItems.length),
                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 150,
                  crossAxisSpacing: 5,
                  mainAxisSpacing: 5,
                  childAspectRatio: 1,
                ),
              ),
            ),
          ),
        ],
      ),
      bottomNavigationBar: FilterBar(scrollController: _scrollController),
    );
  }
}