import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers/navigation_provider.dart';
import '../providers/theme_provider.dart';
import 'pokemon_list.dart';
import 'guess_page.dart';
import 'system_page.dart';

class MainPage extends ConsumerWidget {
  const MainPage({Key? key}) : super(key: key);

  static const List<Widget> _pages = [
    PokemonListPage(),
    GuessPage(),
    SystemPage(),
  ];

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final currentIndex = ref.watch(selectedTabProvider);
    final palette = appPalettes[ref.watch(themeProvider)];
    final primaryDark = HSLColor.fromColor(palette.primary)
        .withLightness((HSLColor.fromColor(palette.primary).lightness - 0.1).clamp(0.0, 1.0))
        .toColor();

    return Scaffold(
      backgroundColor: palette.surface,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
          child: Container(
            decoration: BoxDecoration(
              color: palette.primary,
              borderRadius: BorderRadius.circular(30),
              border: Border.all(color: primaryDark, width: 4),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(26),
              child: IndexedStack(
                index: currentIndex,
                children: _pages,
              ),
            ),
          ),
        ),
      ),
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) => ref.read(selectedTabProvider.notifier).set(index),
          type: BottomNavigationBarType.fixed,
          selectedItemColor: palette.primary,
          unselectedItemColor: Colors.grey,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.grid_view), label: 'LIST'),
            BottomNavigationBarItem(icon: Icon(Icons.games), label: 'GUESS'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'SYSTEM'),
          ],
        ),
      ),
    );
  }
}
