part of 'pages.dart';

class MainPage extends StatefulWidget {
  static const routeName = '/main_page';

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List components = [
    {
      'title': 'Accordion',
      'route': '/accordion_page',
      'route_dynamic': '/accordion_page_dynamic'
    },
    {
      'title': 'Alert',
      'route': '/alert_page',
      'route_dynamic': '/alert_page_dynamic'
    },
    {
      'title': 'App Bar',
      'route': '/appbar_page/appbar_homepage',
      'route_dynamic': '/appbar_page_dynamic/appbar_homepage_dynamic'
    },
    {
      'title': 'Avatar',
      'route': '/avatar_page',
      'route_dynamic': '/avatar_page_dynamic'
    },
    {
      'title': 'Badges',
      'route': '/badges_page',
      'route_dynamic': '/badges_page_dynamic'
    },
    {
      'title': 'Buttons',
      'route': '/buttons_page/buttons_page',
      'route_dynamic': '/buttons_page/buttons_page_dynamic'
    },
    {
      'title': 'Cards',
      'route': '/card_page',
      'route_dynamic': '/card_page_dynamic'
    },
    {
      'title': 'Carousel',
      'route': '/carousel_page',
      'route_dynamic': '/carousel_page_dynamic'
    },
    {
      'title': 'Label',
      'route': '/label_page',
      'route_dynamic': '/label_page_dynamic'
    },
    // {
    //   'title': 'Loading',
    //   'route': '/loading_page',
    //   'route_dynamic': '/loading_page_dynamic'
    // },
    {
      'title': 'Tabs',
      'route': '/tabs_page/tabs_page',
      'route_dynamic': '/tabs_page/tabs_page_dynamic'
    },
    {
      'title': 'Tiles',
      'route': '/tiles_page',
      'route_dynamic': '/tiles_page_dynamic'
    },
    {
      'title': 'Toast',
      'route': '/toast_page',
      'route_dynamic': '/toast_page_dynamic'
    },
    {
      'title': 'Toggle',
      'route': '/toggle_page',
      'route_dynamic': '/toggle_page_dynamic'
    },
  ];

  // {
  //   'title': 'Test State & API',
  //   'route': '',
  //   'route_dynamic': '/test_state_page'
  // }

  Widget buildSquareTile(String title, String route, String routeDynamic) => InkWell(
    onTap: () {
      ActionSheet.material(
        context,
        "Choose how the component/widget will be rendered",
        () {
          Navigator.of(context).pop();
          Navigator.of(context).pushNamed(
            route
          );
        },
        () async {
          Navigator.of(context).pop();
          Navigator.of(context).pushNamed(
            routeDynamic
          );
        },
        "Static",
        "Dynamic from JSON",
        16,
        Icons.format_list_numbered,
        Icons.dynamic_form
      );
    },
    child: Container(
      decoration: BoxDecoration(
        color: LLSColors.SECONDARY,
        borderRadius: const BorderRadius.all(Radius.circular(7)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.61),
            blurRadius: 6,
            spreadRadius: 0
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            title,
            style: const TextStyle(color: LLSColors.WHITE, fontSize: 16),
          )
        ],
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: LLSColors.PRIMARY,
        leading: null,
        title: Text(
          'LLS Widget',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
        automaticallyImplyLeading: false,
        actions: [
          const PopupActionsButton()
        ]
      ),
      body: ListView(
        physics: const ScrollPhysics(),
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(
                left: 15, bottom: 20, top: 20, right: 15),
            child: GridView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: const ScrollPhysics(),
              itemCount: components.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20
              ),
              itemBuilder: (BuildContext context, int index) =>
                GestureDetector(
                  onTap: () {
                    ActionSheet.material(
                      context,
                      "Choose how the widget will be rendered",
                      () {
                        Navigator.of(context).pop();
                        Navigator.of(context).pushNamed(
                          components[index]['route']
                        );
                      },
                      () async {
                        Navigator.of(context).pop();
                        Navigator.of(context).pushNamed(
                          components[index]['route_dynamic']
                        );
                      },
                      "Static",
                      "Dynamic from JSON",
                      16,
                      Icons.format_list_numbered,
                      Icons.dynamic_form
                    );
                  },
                  child: buildSquareTile(
                    components[index]['title'],
                    components[index]['route'],
                    components[index]['route_dynamic']
                  )
                )
            ),
          ),
        ]
      )
    );
  }
}