import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_kit_example/bars/bars.dart';
import 'package:wyatt_ui_kit_example/buttons/buttons.dart';
import 'package:wyatt_ui_kit_example/cards/cards.dart';
import 'package:wyatt_ui_kit_example/cubit/app_mode_cubit.dart';
import 'package:wyatt_ui_kit_example/demo_page.dart';
import 'package:wyatt_ui_kit_example/loaders/loaders.dart';
import 'package:wyatt_ui_kit_example/rich_text_builders/rich_text_builders.dart';
import 'package:wyatt_ui_kit_example/text_input/text_inputs.dart';

const String title = 'Wyatt UIKit Example';
const List<String> themes = ['Material', 'Studio'];

class Home extends StatefulWidget {
  const Home({super.key, this.forceIndex = 0});

  final int forceIndex;

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // Simply add your demo page here.
  final List<DemoPage> pages = const [
    Cards(),
    Buttons(),
    Loaders(),
    RichTextBuilders(),
    TextInputs(),
    Bars(),
  ];

  int currentIndex = 0;

  @override
  void initState() {
    currentIndex = widget.forceIndex;
    super.initState();
  }

  List<Widget> _drawerTiles(BuildContext context) {
    final tiles = <Widget>[];
    for (var i = 0; i < pages.length; i++) {
      final page = pages[i];
      tiles.add(
        ListTile(
          title: Text(page.title),
          onTap: () {
            if (currentIndex != i) {
              setState(() {
                currentIndex = i;
              });
              Navigator.pop(context);
            }
          },
        ),
      );
    }

    return tiles;
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: _drawerTiles(context),
          ),
        ),
        appBar: AppBar(
          title: const Text(title),
          actions: [
            Row(
              children: [
                const Text('Dark'),
                Switch.adaptive(
                  value: context.watch<AppModeCubit>().state.brightness ==
                      Brightness.dark,
                  onChanged: (value) {
                    context.read<AppModeCubit>().changeBrightness(
                          value ? Brightness.dark : Brightness.light,
                        );
                  },
                ),
              ],
            ),
            const Gap(30),
            DropdownButton<int>(
              items: themes
                  .map(
                    (e) => DropdownMenuItem(
                      value: themes.indexOf(e),
                      child: Text(e),
                    ),
                  )
                  .toList(),
              value: context.watch<AppModeCubit>().state.theme,
              onChanged: (value) {
                context.read<AppModeCubit>().changeTheme(value ?? 0);
              },
              hint: const Text('Theme'),
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: pages[currentIndex],
        ),
      );
}