import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:pullex/pullex.dart';

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

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

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

class _MediaGrid extends State<MediaGrid> {
  final ScrollController _scrollController = ScrollController();
  final MediaController _mediaController = Get.put(MediaController());
  final PullexRefreshController _refreshController = PullexRefreshController(
    initialRefresh: false,
  );

  @override
  void initState() {
    super.initState();
    _mediaController.fetchInitial();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: EndDrawer(),
      endDrawerEnableOpenDragGesture: _mediaController.drawerSwipeEnabled.value,
      bottomNavigationBar: FilterBar(scrollController: _scrollController),
      body: PullexRefresh(
        controller: _refreshController,
        enablePullDown: true,
        enablePullUp: true,
        header: MaterialHeader(offset: 140),
        onRefresh: () async {
          try {
            if (_mediaController.loading.value) return;
            if (!_mediaController.atStart.value) {
              await _mediaController.fetchNewer();
            } else {
              await _mediaController.fetchInitial();
            }
          } finally {
            _refreshController.refreshCompleted();
          }
        },
        onLoading: () async {
          try {
            if (!_mediaController.loading.value &&
                !_mediaController.atEnd.value) {
              await _mediaController.fetchMore();
            }
          } finally {
            _refreshController.loadComplete();
          }
        },
        child: CustomScrollView(
          controller: _scrollController,
          slivers: [
            SliverAppBar(
              pinned: false,
              snap: true,
              floating: 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: () {
                  _mediaController.setTag(null);
                },
              ),
              actions: [
                IconButton(
                  icon: const Icon(Icons.search),
                  onPressed: () async {
                    await showSearch(
                      context: context,
                      delegate: CustomSearchDelegate(),
                    );
                  },
                ),
                Obx(
                  () => IconButton(
                    icon: Icon(
                      _mediaController.random.value == 1
                          ? Icons.shuffle_on_outlined
                          : Icons.shuffle,
                    ),
                    onPressed: () {
                      _mediaController.toggleRandom();
                    },
                  ),
                ),
                Builder(
                  builder: (context) {
                    return IconButton(
                      icon: const Icon(Icons.menu),
                      onPressed: () {
                        Scaffold.of(context).openEndDrawer();
                      },
                    );
                  },
                ),
              ],
            ),
            Obx(
              () => SliverPadding(
                padding: const EdgeInsets.all(4),
                sliver: SliverGrid(
                  delegate: SliverChildBuilderDelegate((context, index) {
                    final item = _mediaController.filteredItems[index];
                    return GestureDetector(
                      onTap: () {
                        final item = _mediaController.filteredItems[index];
                        Get.to(() => MediaDetailScreen(initialId: item.id));
                      },
                      child: MediaTile(item: item),
                    );
                  }, childCount: _mediaController.filteredItems.length),
                  gridDelegate: _mediaController.crossAxisCount.value == 0
                      ? const SliverGridDelegateWithMaxCrossAxisExtent(
                          maxCrossAxisExtent: 150,
                          crossAxisSpacing: 5,
                          mainAxisSpacing: 5,
                          childAspectRatio: 1,
                        )
                      : SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: _mediaController.crossAxisCount.value,
                          crossAxisSpacing: 5,
                          mainAxisSpacing: 5,
                          childAspectRatio: 1,
                        ),
                ),
              ),
            ),
          ],
        ),
      ),
      persistentFooterButtons: [
        Obx(() {
          if (_mediaController.tag.value != null) {
            return Center(
              child: InputChip(
                label: Text(_mediaController.tag.value!),
                onDeleted: () {
                  _mediaController.setTag(null);
                  Get.offAllNamed('/');
                },
              ),
            );
          } else {
            return SizedBox.shrink();
          }
        }),
      ],
    );
  }
}