import 'package:fluent_ui/fluent_ui.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:info_tren/models.dart';
import 'package:info_tren/pages/settings/setings_page.dart';
import 'package:info_tren/providers.dart';

class SettingsPageFluent extends SettingsPageShared {
  const SettingsPageFluent({super.key,});

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      appBar: NavigationAppBar(
        title: Text(pageTitle),
      ),
      content: SingleChildScrollView(
        child: Column(
          children: [
            Consumer(
              builder: (context, ref, _) {
                final currentUiDesign = ref.watch(uiDesignProvider);
                return ListTile(
                  title: Text(appearanceTitle),
                  trailing: ComboBox<UiDesign>(
                    items: UiDesign.values.map((d) => ComboBoxItem(
                      value: d,
                      child: Text(d.userInterfaceName),
                    )).toList(),
                    value: currentUiDesign,
                    onChanged: (newUiDesign) {
                      ref.read(uiDesignProvider.notifier).set(newUiDesign);
                    },
                  ),
                );
              },
            ),
            Consumer(
              builder: (context, ref, _) {
                final currentTZ = ref.watch(uiTimeZoneProvider);
                return ListTile(
                  title: Text(timeZoneTitle),
                  trailing: ComboBox<UiTimeZoneType>(
                    items: UiTimeZoneType.values.where((tz) => tz != UiTimeZoneType.iana).map((tzt) => ComboBoxItem(
                      value: tzt,
                      child: Text(tzt.userInterfaceName),
                    )).toList(),
                    value: currentTZ.type,
                    onChanged: (newTZ) {
                      if (newTZ != null) {
                        ref.read(uiTimeZoneProvider.notifier).set(UiTimeZone.fromSerString('${newTZ.name}\n'));
                      }
                      else {
                        ref.read(uiTimeZoneProvider.notifier).set(null);
                      }
                    },
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}