import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:gap/gap.dart';

import '../../config.dart';
import '../../providers/theme.dart';
import '../../models/enum_theme.dart';

class SettingsThemePage extends HookConsumerWidget {
  const SettingsThemePage({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return Scaffold(
      appBar: AppBar(title: const Text('外观')),
      body: ListView(
        children: [
          const Gap(16),
          ListTile(
            title: const Text('配色方案'),
            trailing: DropdownMenu<ThemeModeType>(
              initialSelection: ref.watch(themeModeProvider),
              onSelected: (value) { if (value != null) ref.read(themeModeProvider.notifier).set(value); },
              dropdownMenuEntries: const [
                DropdownMenuEntry(value: ThemeModeType.system, label: '跟随系统'),
                DropdownMenuEntry(value: ThemeModeType.light, label: '亮色'),
                DropdownMenuEntry(value: ThemeModeType.dark, label: '暗色'),
              ],
            ),
          ),
          const Gap(16),
          SwitchListTile(
            title: Text('动态配色'),
            value: ref.watch(useDynamicColorProvider),
            onChanged: (value) { ref.read(useDynamicColorProvider.notifier).set(value); },
          ),
          //const Divider(height: 16),
        ],
      ),
    );
  }
}