~repos /only-bible-app

import "package:flutter/material.dart";
import "package:only_bible_app/gen/bible.gen.dart";
import "package:only_bible_app/store/app_state.dart";
import "package:only_bible_app/store/actions_state.dart";

class SettingsSheet extends StatelessWidget {
  final Bible bible;

  const SettingsSheet({super.key, required this.bible});

  @override
  Widget build(BuildContext context) {
    final darkMode = context.select((s) => s.darkMode);
    final fontWeight = context.select((s) => s.fontWeight);
    final engTitles = context.select((s) => s.engTitles);
    final fontSize = context.select((s) => s.fontSize);
    final colorScheme = Theme.of(context).colorScheme;
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final cardColor = isDark ? colorScheme.surfaceContainerHigh : colorScheme.surface;
    final cardBorderColor = isDark ? colorScheme.outlineVariant : colorScheme.scrim;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            bible.settingsTitle!,
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          const SizedBox(height: 16),
          // Theme toggle
          Material(
            elevation: isDark ? 2 : 1,
            borderRadius: BorderRadius.circular(12),
            color: cardColor,
            shadowColor: colorScheme.shadow,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: cardBorderColor),
              ),
              child: Row(
                children: [
                  const Icon(Icons.color_lens_outlined, color: Colors.green),
                  const SizedBox(width: 12),
                  Expanded(child: Text(bible.themeTitle!)),
                  ToggleButtons(
                    onPressed: (_) => context.dispatch(ToggleDarkModeAction()),
                    highlightColor: Colors.transparent,
                    borderColor: Colors.grey,
                    borderRadius: const BorderRadius.all(Radius.circular(25)),
                    selectedColor: darkMode ? Colors.lightBlue.shade300 : Colors.yellowAccent.shade700,
                    selectedBorderColor: Colors.grey,
                    color: Colors.grey,
                    fillColor: Colors.transparent,
                    constraints: const BoxConstraints(minHeight: 36, minWidth: 50),
                    isSelected: [!darkMode, darkMode],
                    children: const [
                      Icon(Icons.light_mode),
                      Icon(Icons.dark_mode),
                    ],
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 8),
          // Font size slider
          Material(
            elevation: isDark ? 2 : 1,
            borderRadius: BorderRadius.circular(12),
            color: cardColor,
            shadowColor: colorScheme.shadow,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: cardBorderColor),
              ),
              child: Row(
                children: [
                  Icon(Icons.format_size, color: colorScheme.onSurface),
                  const SizedBox(width: 12),
                  Text("${fontSize.round()}"),
                  Expanded(
                    child: Slider(
                      value: fontSize,
                      min: 14,
                      max: 26,
                      divisions: 12,
                      label: "${fontSize.round()}",
                      onChanged: (v) => context.dispatch(UpdateFontSizeAction(v)),
                    ),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 8),
          // Font weight slider
          Material(
            elevation: isDark ? 2 : 1,
            borderRadius: BorderRadius.circular(12),
            color: cardColor,
            shadowColor: colorScheme.shadow,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: cardBorderColor),
              ),
              child: Row(
                children: [
                  Icon(Icons.format_bold, color: colorScheme.onSurface),
                  const SizedBox(width: 12),
                  Text("$fontWeight"),
                  Expanded(
                    child: Slider(
                      value: fontWeight.toDouble(),
                      min: 100,
                      max: 900,
                      divisions: 8,
                      label: "$fontWeight",
                      onChanged: (v) => context.dispatch(UpdateFontWeightAction(v.round())),
                    ),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 8),
          // English titles toggle
          Material(
            elevation: isDark ? 2 : 1,
            borderRadius: BorderRadius.circular(12),
            color: cardColor,
            shadowColor: colorScheme.shadow,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: cardBorderColor),
              ),
              child: Row(
                children: [
                  Icon(Icons.abc, color: colorScheme.onSurface),
                  const SizedBox(width: 12),
                  Expanded(child: Text(bible.engTitles!)),
                  Switch(
                    value: engTitles,
                    onChanged: (_) => context.dispatch(ToggleEngTitlesAction()),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 16),
          Spacer(),
        ],
      ),
    );
  }
}