import 'package:flutter/material.dart';

import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:f0ckapp/providers/media_provider.dart';
import 'package:f0ckapp/widgets/end_drawer.dart';

class SettingsPage extends ConsumerStatefulWidget {
  const SettingsPage({super.key});

  @override
  ConsumerState<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends ConsumerState<SettingsPage> {
  int _columns = 3;
  bool _drawerSwipeEnabled = true;

  @override
  Widget build(BuildContext context) {
    final MediaState mediaState = ref.watch(mediaProvider);
    final MediaNotifier mediaNotifier = ref.read(mediaProvider.notifier);

    return Scaffold(
      endDrawerEnableOpenDragGesture: _drawerSwipeEnabled,
      endDrawer: EndDrawer(ref: ref),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            floating: false,
            pinned: true,
            title: const Text('Settings'),
            leading: IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: () {
                Navigator.canPop(context) ? Navigator.pop(context) : Navigator.pushReplacementNamed(context, '/');
              },
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(
                  "Anzahl der Spalten",
                  style: Theme.of(context).textTheme.titleLarge,
                ),
              ),
              ListTile(
                title: const Text("Spaltenanzahl"),
                trailing: DropdownButton<int>(
                  value: mediaState.crossAxisCount,
                  dropdownColor: const Color.fromARGB(255, 43, 43, 43),
                  iconEnabledColor: Colors.white,
                  items: [0, 3, 4, 5].map((int value) {
                    return DropdownMenuItem<int>(
                      value: value,
                      child: Text(value == 0 ? 'auto' : '$value Spalten'),
                    );
                  }).toList(),
                  onChanged: (int? newValue) {
                    if (newValue != null) {
                      setState(() {
                        _columns = newValue;
                        mediaNotifier.setCrossAxisCount(newValue);
                      });
                    }
                  },
                ),
              ),
              const Divider(),
              SwitchListTile(
                title: const Text("Drawer per Geste öffnen"),
                subtitle: const Text(
                  "Wähle, ob der Drawer mit einer Wischgeste geschlossen/ geöffnet werden kann.",
                ),
                value: _drawerSwipeEnabled,
                onChanged: (bool value) {
                  setState(() {
                    _drawerSwipeEnabled = value;
                  });
                },
              ),
              const Divider(),
              ListTile(
                title: const Text("Cache löschen"),
                trailing: ElevatedButton(
                  onPressed: () async {
                    await DefaultCacheManager().emptyCache();
                    if (!mounted) return;
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text("Cache wurde geleert.")),
                    );
                  },
                  child: const Text("Löschen"),
                ),
              ),
              const SizedBox(height: 20),
            ]),
          ),
        ],
      ),
    );
  }
}