import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:f0ckapp/utils/customsearchdelegate.dart';
import 'package:f0ckapp/widgets/filter_bar.dart';
import 'package:f0ckapp/widgets/end_drawer.dart';
import 'package:f0ckapp/controller/media_controller.dart';
import 'package:f0ckapp/widgets/media_tile.dart';

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

  @override
  State<MediaGrid> createState() => _MediaGridState();
}

class _MediaGridState extends State<MediaGrid> {
  final MediaController controller = Get.find<MediaController>();
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    controller.loadMediaItems();

    ever(controller.drawerSwipeEnabled, (_) {
      setState(() {});
    });

    _scrollController.addListener(() {
      if (_scrollController.position.extentAfter < 200 &&
          !controller.isLoading.value) {
        controller.loadMediaItems(
          older: controller.mediaItems.isNotEmpty
              ? controller.mediaItems.last.id
              : null,
          append: true,
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: EndDrawer(),
      endDrawerEnableOpenDragGesture: controller.drawerSwipeEnabled.value,
      body: RefreshIndicator(
        edgeOffset: 100,
        onRefresh: () async {
          await controller.loadMediaItems();
        },
        child: CustomScrollView(
          controller: _scrollController,
          slivers: [
            SliverAppBar(
              floating: true,
              snap: true,
              title: GestureDetector(
                child: Row(
                  children: [
                    Image.asset(
                      'assets/images/f0ck_small.webp',
                      fit: BoxFit.fitHeight,
                    ),
                    const SizedBox(width: 10),
                    const Text('fApp', style: TextStyle(fontSize: 24)),
                  ],
                ),
                onTap: () {
                  controller.setTag(null);
                },
              ),
              actions: [
                IconButton(
                  icon: const Icon(Icons.search),
                  onPressed: () async {
                    await showSearch(
                      context: context,
                      delegate: CustomSearchDelegate(),
                    );
                  },
                ),
                Obx(
                  () => IconButton(
                    icon: Icon(
                      controller.random.value
                          ? Icons.shuffle_on_outlined
                          : Icons.shuffle,
                    ),
                    onPressed: () async {
                      await controller.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: controller.mediaItems[index]);
                  }, childCount: controller.mediaItems.length),
                  gridDelegate: controller.crossAxisCount.value == 0
                      ? const SliverGridDelegateWithMaxCrossAxisExtent(
                          maxCrossAxisExtent: 150,
                          crossAxisSpacing: 5,
                          mainAxisSpacing: 5,
                          childAspectRatio: 1,
                        )
                      : SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: controller.crossAxisCount.value,
                          crossAxisSpacing: 5,
                          mainAxisSpacing: 5,
                          childAspectRatio: 1,
                        ),
                ),
              ),
            ),
          ],
        ),
      ),
      persistentFooterButtons: [
        Obx(() {
          if (controller.tag.value != null) {
            return Center(
              child: InputChip(
                label: Text(controller.tag.value!),
                onDeleted: () async {
                  await controller.setTag(null);
                  Get.offAllNamed('/');
                },
              ),
            );
          } else {
            return SizedBox.shrink();
          }
        }),
      ],
      bottomNavigationBar: FilterBar(scrollController: _scrollController),
    );
  }
}