Advanced Usage

import 'dart:convert';
import 'package:flutter/services.dart';

class ThemeManager {
  static Future<NebuxColorThemes> loadThemeFromJson() async {
    final jsonString = await rootBundle.loadString('assets/theme.json');
    final jsonMap = json.decode(jsonString) as Map<String, dynamic>;
    
    return NebuxColorThemes(
      light: NebuxColors.fromJson(jsonMap['light']),
      dark: NebuxColors.fromJson(jsonMap['dark']),
    );
  }
}

// Usage
final colorThemes = await ThemeManager.loadThemeFromJson();

import 'package:flutter/services.dart';
import 'package:toml/toml.dart';

class ThemeManager {
  static Future<NebuxColorThemes> loadThemeFromToml() async {
    final tomlString = await rootBundle.loadString('assets/theme.toml');
    final tomlMap = TomlDocument.parse(tomlString).toMap();
    
    return NebuxColorThemes(
      light: NebuxColors.fromJson(tomlMap['light']),
      dark: NebuxColors.fromJson(tomlMap['dark']),
    );
  }
}

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

  @override
  State<AnimatedThemeScreen> createState() => _AnimatedThemeScreenState();
}

class _AnimatedThemeScreenState extends State<AnimatedThemeScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  void _toggleTheme() {
    if (_controller.isCompleted) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        final lightColors = NebuxColors.standardLight();
        final darkColors = NebuxColors.standardDark();
        
        // Interpolate between light and dark colors
        final interpolatedColors = NebuxColorsLerp.lerp(
          lightColors,
          darkColors,
          _animation.value,
        );

        return Container(
          color: interpolatedColors?.background,
          child: Center(
            child: ElevatedButton(
              onPressed: _toggleTheme,
              style: ElevatedButton.styleFrom(
                backgroundColor: interpolatedColors?.primary,
              ),
              child: const Text('Toggle Theme'),
            ),
          ),
        );
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

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

  @override
  State<InterpolatedThemeApp> createState() => _InterpolatedThemeAppState();
}

class _InterpolatedThemeAppState extends State<InterpolatedThemeApp> {
  ThemeMode _themeMode = ThemeMode.light;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: _themeMode,
      // Theme interpolation happens automatically
      themeAnimationDuration: const Duration(milliseconds: 400),
      themeAnimationCurve: Curves.easeInOut,
      theme: NebuxTheme.createThemeData(
        isDark: false,
        colors: NebuxColors.standardLight(),
        fontSize: NebuxFontSize.standard(),
        typography: NebuxTypography.standard(),
      ),
      darkTheme: NebuxTheme.createThemeData(
        isDark: true,
        colors: NebuxColors.standardDark(),
        fontSize: NebuxFontSize.standard(),
        typography: NebuxTypography.standard(),
      ),
      home: HomeScreen(
        onToggleTheme: () {
          setState(() {
            _themeMode = _themeMode == ThemeMode.light
                ? ThemeMode.dark
                : ThemeMode.light;
          });
        },
      ),
    );
  }
}

// Good: const constructor
const Text('Hello').nbxPaddingAll(16.0);

// Better: Pre-defined spacing constants
const heightSpace16;  // SizedBox(height: 16)
const widthSpace16;   // SizedBox(width: 16)

// Bad: Multiple theme lookups
Widget build(BuildContext context) {
  return Column(
    children: [
      Text('Title', style: TextStyle(color: context.nebuxColors.textPrimary)),
      Text('Subtitle', style: TextStyle(color: context.nebuxColors.textSecondary)),
      Divider(color: context.nebuxColors.divider),
    ],
  );
}

// Good: Cache theme access
Widget build(BuildContext context) {
  final colors = context.nebuxColors;
  final typography = context.nebuxTypography;
  
  return Column(
    children: [
      Text('Title', style: typography.heading.copyWith(color: colors.textPrimary)),
      Text('Subtitle', style: typography.section.copyWith(color: colors.textSecondary)),
      Divider(color: colors.divider),
    ],
  );
}

// For large lists, minimize wrapper widgets
class OptimizedListItem extends StatelessWidget {
  final String title;
  
  const OptimizedListItem({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    // Cache theme access outside of builder
    final colors = context.nebuxColors;
    final typography = context.nebuxTypography;

    return ListTile(
      title: Text(title, style: typography.paragraph),
      tileColor: colors.surface,
    );
  }
}

// Use ListView.builder for large lists
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return OptimizedListItem(title: items[index]);
  },
);

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

  @override
  State<SearchField> createState() => _SearchFieldState();
}

class _SearchFieldState extends State<SearchField> {
  final _debouncer = NebuxDebouncer(milliseconds: 300);
  final _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      _debouncer.run(() {
        performSearch(_controller.text);
      });
    });
  }

  void performSearch(String query) {
    // Expensive search operation
  }

  @override
  void dispose() {
    _debouncer.dispose();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return NbxTextFieldWidget(
      NbxInputParameters(
        hintText: 'Search...',
        inputType: NbxInputType.text,
      ),
      controller: _controller,
    );
  }
}

class ThemeRepository {
  final _prefs = SharedPreferences.getInstance();

  Future<ThemeMode> getThemeMode() async {
    final prefs = await _prefs;
    final isDark = prefs.getBool('isDark') ?? false;
    return isDark ? ThemeMode.dark : ThemeMode.light;
  }

  Future<void> setThemeMode(ThemeMode mode) async {
    final prefs = await _prefs;
    await prefs.setBool('isDark', mode == ThemeMode.dark);
  }

  Future<NebuxColorThemes> loadCustomTheme() async {
    try {
      final jsonString = await rootBundle.loadString('assets/theme.json');
      final jsonMap = json.decode(jsonString) as Map<String, dynamic>;
      return NebuxColorThemes(
        light: NebuxColors.fromJson(jsonMap['light']),
        dark: NebuxColors.fromJson(jsonMap['dark']),
      );
    } catch (e) {
      // Fallback to standard themes
      return NebuxColorThemes.standard();
    }
  }
}

class ThemeProvider extends ChangeNotifier {
  final ThemeRepository _repository;
  ThemeMode _themeMode = ThemeMode.light;
  NebuxColorThemes? _colorThemes;

  ThemeProvider(this._repository) {
    _init();
  }

  ThemeMode get themeMode => _themeMode;
  NebuxColorThemes get colorThemes => 
      _colorThemes ?? NebuxColorThemes.standard();

  Future<void> _init() async {
    _themeMode = await _repository.getThemeMode();
    _colorThemes = await _repository.loadCustomTheme();
    notifyListeners();
  }

  Future<void> toggleTheme() async {
    _themeMode = _themeMode == ThemeMode.light 
        ? ThemeMode.dark 
        : ThemeMode.light;
    await _repository.setThemeMode(_themeMode);
    notifyListeners();
  }
}

final testTypography = NebuxTypography.custom('Roboto', null);

testWidgets('Button shows correct text', (tester) async {
  await tester.pumpWidget(
    MaterialApp(
      theme: NebuxTheme.createThemeData(
        isDark: false,
        colors: NebuxColors.standardLight(),
        fontSize: NebuxFontSize.standard(),
        typography: testTypography,
      ),
      home: Scaffold(
        body: NbxButton(
          text: 'Test',
          onPressed: () {},
        ),
      ),
    ),
  );

  expect(find.text('Test'), findsOneWidget);
});

Widget buildTestWidget(Widget child) {
  return MaterialApp(
    theme: NebuxTheme.createThemeData(
      isDark: false,
      colors: NebuxColors.standardLight(),
      fontSize: NebuxFontSize.standard(),
      typography: NebuxTypography.custom('Roboto', null),
    ),
    home: Scaffold(body: child),
  );
}

testWidgets('Component uses correct colors', (tester) async {
  await tester.pumpWidget(
    buildTestWidget(
      Builder(
        builder: (context) {
          final colors = context.nebuxColors;
          return Container(color: colors.primary);
        },
      ),
    ),
  );

  // Test color is applied correctly
});