import 'package:flutter/material.dart';

import 'widgets/component_decoration.dart';

// https://github.com/flutter/samples/blob/main/material_3_demo/lib/component_screen.dart

const rowDivider = SizedBox(width: 20);
const colDivider = SizedBox(height: 10);

const tinySpacing = 3.0;
const smallSpacing = 10.0;
const double cardWidth = 115;
const double widthConstraint = 450;

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

  @override
  State<MaterialDemoScreen> createState() => _MaterialDemoScreenState();
}

class _MaterialDemoScreenState extends State<MaterialDemoScreen> {
  bool switch1 = false;
  bool switch2 = true;

  double sliderValue1 = 0.2;
  double sliderValue2 = 0.5;

  int navBarIndex = 0;

  bool indicatorPlayAnimation = false;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(
            height: 84,
          ),
          ComponentDecoration(
            title: 'Common Buttons',
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: const Text('Elevated'),
                    ),
                    rowDivider,
                    ElevatedButton.icon(
                      onPressed: () {},
                      icon: const Icon(Icons.add),
                      label: const Text('Icon'),
                    ),
                    rowDivider,
                    const ElevatedButton(
                      style: ButtonStyle(),
                      onPressed: null,
                      child: Text('Elevated'),
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    FilledButton(
                      onPressed: () {},
                      child: const Text('Filled'),
                    ),
                    rowDivider,
                    FilledButton.icon(
                      onPressed: () {},
                      icon: const Icon(Icons.add),
                      label: const Text('Icon'),
                    ),
                    rowDivider,
                    const FilledButton(
                      style: ButtonStyle(),
                      onPressed: null,
                      child: Text('Filled'),
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextButton(
                      onPressed: () {},
                      child: const Text('Text'),
                    ),
                    rowDivider,
                    TextButton.icon(
                      onPressed: () {},
                      icon: const Icon(Icons.add),
                      label: const Text('Icon'),
                    ),
                    rowDivider,
                    const TextButton(
                      style: ButtonStyle(),
                      onPressed: null,
                      child: Text('Text'),
                    ),
                  ],
                ),
              ],
            ),
          ),
          ComponentDecoration(
            title: 'Switches',
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Switch(
                  value: switch1,
                  onChanged: (bool value) {
                    setState(() {
                      switch1 = value;
                    });
                  },
                ),
                Switch(
                  value: switch2,
                  thumbIcon: MaterialStateProperty.resolveWith<Icon?>(
                      (Set<MaterialState> states) {
                    if (states.contains(MaterialState.selected)) {
                      return const Icon(Icons.check);
                    }
                    return null; // All other states will use the default thumbIcon.
                  }),
                  onChanged: (bool value) {
                    setState(() {
                      switch2 = value;
                    });
                  },
                ),
              ],
            ),
          ),
          ComponentDecoration(
            title: 'Floating Action Buttons',
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                FloatingActionButton.small(
                  onPressed: () {},
                  tooltip: 'Small',
                  child: const Icon(Icons.add),
                ),
                FloatingActionButton(
                  onPressed: () {},
                  tooltip: 'Standard',
                  child: const Icon(Icons.add),
                ),
                FloatingActionButton.extended(
                  onPressed: () {},
                  tooltip: 'Extended',
                  icon: const Icon(Icons.add),
                  label: const Text('Create'),
                ),
                FloatingActionButton.large(
                  onPressed: () {},
                  tooltip: 'Large',
                  child: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          ComponentDecoration(
            title: 'Sliders',
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Slider(
                  value: sliderValue1,
                  onChanged: (double value) {
                    setState(() {
                      sliderValue1 = value;
                    });
                  },
                ),
                Slider(
                  value: sliderValue2,
                  onChanged: (double value) {
                    setState(() {
                      sliderValue2 = value;
                    });
                  },
                  divisions: 5,
                ),
              ],
            ),
          ),
          ComponentDecoration(
            title: 'Loading Indicators',
            child: Column(
              children: [
                IconButton(
                  onPressed: () {
                    setState(() {
                      indicatorPlayAnimation = !indicatorPlayAnimation;
                    });
                  },
                  icon: indicatorPlayAnimation
                      ? const Icon(Icons.pause)
                      : const Icon(Icons.play_arrow),
                ),
                colDivider,
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    rowDivider,
                    CircularProgressIndicator(
                      value: indicatorPlayAnimation ? null : 0.5,
                    ),
                    rowDivider,
                    Expanded(
                      child: LinearProgressIndicator(
                        value: indicatorPlayAnimation ? null : 0.5,
                      ),
                    ),
                    rowDivider,
                  ],
                ),
              ],
            ),
          ),
          ComponentDecoration(
            title: 'Dialogs and BottomSheets',
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () {
                    showModalBottomSheet(
                      context: context,
                      builder: (BuildContext context) {
                        // https://api.flutter.dev/flutter/material/showModalBottomSheet.html
                        return SizedBox(
                          height: 200,
                          child: Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                const Text('Modal BottomSheet'),
                                ElevatedButton(
                                  child: const Text('Close BottomSheet'),
                                  onPressed: () => Navigator.pop(context),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    );
                  },
                  child: const Text('show ModalBottomSheet'),
                ),
                ElevatedButton(
                  onPressed: () {
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: const Text('Dialog Title'),
                          content: const Text('Dialog description'),
                          actions: <Widget>[
                            TextButton(
                              onPressed: () => Navigator.pop(context),
                              child: const Text('Close'),
                            ),
                          ],
                        );
                      },
                    );
                  },
                  child: const Text('show Dialog'),
                ),
                ElevatedButton(
                  onPressed: () {
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return Dialog.fullscreen(
                          child: Scaffold(
                            appBar: AppBar(
                              title: const Text('Fullscreen Dialog'),
                            ),
                            body: Center(
                              child: ElevatedButton(
                                child: const Text('Close Dialog'),
                                onPressed: () => Navigator.pop(context),
                              ),
                            ),
                          ),
                        );
                      },
                    );
                  },
                  child: const Text('show Fullscreen Dialog'),
                ),
              ],
            ),
          ),
          ComponentDecoration(
            title: 'Navigation Bar',
            child: NavigationBar(
              selectedIndex: navBarIndex,
              onDestinationSelected: (value) {
                setState(() {
                  navBarIndex = value;
                });
              },
              destinations: const [
                NavigationDestination(
                  icon: Icon(Icons.home),
                  label: 'Home',
                ),
                NavigationDestination(
                  icon: Icon(Icons.favorite),
                  label: 'Favorites',
                ),
                NavigationDestination(
                  icon: Icon(Icons.search),
                  label: 'Search',
                ),
                NavigationDestination(
                  icon: Icon(Icons.settings),
                  label: 'Settings',
                ),
              ],
            ),
          ),
          ComponentDecoration(
            title: 'Bottom App Bar',
            child: BottomAppBar(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.menu),
                  ),
                  IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.search),
                  ),
                  IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.more_vert),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
