import 'package:daily_challenge/daily_challenge.dart';
import 'package:daily_challenge/ui/pages/calendar/challenge_calendar_page.dart';
import 'package:daily_challenge/ui/pages/congratulations/congratulations_page.dart';
import 'package:example/generated/assets.dart';
import 'package:example/pages/root/root_model.dart';
import 'package:example/route/router.dart';
import 'package:example/theme/example_theme.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:guru_utils/router/router.dart';

import 'root_controller.dart';
import 'package:guru_widgets/guru_widgets.dart';
import 'package:guru_popup/guru_popup.dart';
import 'package:guru_widgets/theme/guru_theme.dart';
import 'package:guru_widgets/navigationbar/guru_navigation_bar.dart';
import 'package:guru_widgets/pages/navigation/guru_navigation_page.dart';
import 'package:guru_widgets/appbar/guru_app_bar.dart';
import 'package:guru_widgets/tabbar/guru_tab_bar.dart';
import 'package:guru_widgets/sliderbar/guru_slider_bar.dart';
import 'package:guru_widgets/theme/guru_theme.dart';
import 'package:guru_widgets/assetbar/guru_asset_bar.dart';
import 'package:guru_popup/guru_popup.dart';

class RootPage extends GetWidget<RootController> {
  RootDesignSpec get designSpec => controller.designSpec;

  const RootPage({Key? key}) : super(key: key);

  final _divider = const HorizontalDivider(
    height: 0.3,
    indent: 16,
    endIndent: 16,
    thickness: 0.5,
    color: Colors.white30,
  );

  Widget buildEntranceItem(String text,
      {String? leadingAsset, VoidCallback? onTap, TextStyle? style}) {
    final List<Widget> leadingWidgets = [];
    if (leadingAsset != null) {
      leadingWidgets.addAll([
        Image.asset(leadingAsset,
            width: designSpec.itemIconSize, height: designSpec.itemIconSize),
        SizedSpacer(width: designSpec.itemIconEndSpacing)
      ]);
    }
    return Material(
      color: const Color(0xFF1D1D1D),
      child: Ink(
        height: designSpec.itemHeight,
        child: InkWell(
          onTap: () {
            onTap?.call();
          },
          child: Padding(
            padding: EdgeInsetsDirectional.only(
                start: designSpec.itemStartSpacing,
                end: designSpec.entryItemEndSpacing),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ...leadingWidgets,
                Text(text,
                    style: style ??
                        TextStyle(
                            fontSize: designSpec.itemTextFontSize,
                            fontWeight: GuruTheme.fwMedium,
                            color: Colors.white)),
                const Spacer(flex: 1),
                Image.asset(Assets.imagesIcArrowRight,
                    width: designSpec.entryItemIconSize,
                    height: designSpec.entryItemIconSize,
                    color: Colors.white),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget buildBody() {
    return SingleChildScrollView(
      child: Column(
        children: [
          const SizedSpacer(height: 16),
          buildEntranceItem('Button', onTap: () {
            RouteCenter.instance.openPath(Routes.button.path());
          }),
          _divider,
          buildEntranceItem('Dialog', onTap: () {
            RouteCenter.instance.openPath(Routes.dialog.path());
          }),
          _divider,
          buildEntranceItem('Settings', onTap: () {
            RouteCenter.instance.openPath(Routes.settings.path());
          }),
          _divider,
          buildEntranceItem('Tabbar', onTap: () {
            RouteCenter.instance.openPath(Routes.tabbar.path());
          }),
          _divider,
          buildEntranceItem('Toast', onTap: () {
            RouteCenter.instance.openPath(Routes.toast.path());
          }),
          _divider,
          buildEntranceItem('Awards', onTap: () {
            RouteCenter.instance.openPath(Routes.awards.path());
          }),
          _divider,
          buildEntranceItem('DailyChallenge', onTap: () {
            RouteCenter.instance.openDailyChallenge();
          }),
          _divider,
          buildEntranceItem('Challenge Congrats', onTap: () async {
            await GuruPopup.instance.showDailyChallengeCongrats(DateTime.now());
          }),
          _divider,
          buildEntranceItem('Store', onTap: () async {
            RouteCenter.instance.openPath(Routes.store.path());
          }),
          _divider,
          buildEntranceItem('visual', onTap: () async {
            RouteCenter.instance.openPath(Routes.visual.path());
          }),
        ],
      ),
    );
  }

  Widget buildPage() {
    // return Container();
    return ChallengeCalendarPage(nested: true);
  }

  @override
  Widget build(BuildContext context) {
    return GuruNavigationPage(
      showLabels: true,
      items: [
        GuruNavigationBarItem(
            icon: 'assets/images/ic_share.png',
            activeIcon: 'assets/images/ic_share.png',
            label: 'example'),
        GuruNavigationBarItem(
            icon: 'assets/images/ic_share.png',
            activeIcon: 'assets/images/ic_share.png',
            label: 'empty'),
        GuruNavigationBarItem(
            icon: 'assets/images/ic_rect.png',
            activeIcon: 'assets/images/ic_rect.png',
            label: 'empty')
      ],
      bodyBuilders: (context, design) {
        return [
          buildBody(),
          buildPage(),
          Scaffold(
            appBar: GuruAppBar(
              title: 'Large Title',
              leadingType: LeadingType.back,
              size: GuruAppBarSize.large,
              subpage: false,
              actions: [
                IconButton(
                  padding: const EdgeInsets.only(top: 0),
                  splashRadius: GuruThemeDesignSpec.get().appBarDesignSpec.actionIconSize,
                  icon: ImageIcon(
                    const AssetImage("assets/images/Ic_Award.png"),
                    size: GuruThemeDesignSpec.get().appBarDesignSpec.actionIconSize,
                    color: Colors.white,
                  ),
                  onPressed: () {
                  },
                ),
                IconButton(
                  padding: const EdgeInsets.only(top: 0),
                  splashRadius: GuruThemeDesignSpec.get().appBarDesignSpec.actionIconSize,
                  icon: ImageIcon(
                    const AssetImage("assets/images/Ic_Award.png"),
                    size: GuruThemeDesignSpec.get().appBarDesignSpec.actionIconSize,
                    color: Colors.white,
                  ),
                  onPressed: () {
                  },
                )
              ],
            ),
            body: FlexibleContainer(child: Column(children: [
              GuruTabBar(
                key: controller.key,
                items: [
                GuruTabBarItem(title: 'title1'),
                GuruTabBarItem(title: 'title1')
              ]),
              GuruTabBar(
                showIcon: true,
                items: [
                GuruTabBarItem(title: 'title1', icon: "assets/images/Ic_Award.png", activeIcon: "assets/images/slider_bar/x2.png"),
                GuruTabBarItem(title: 'title1', icon: "assets/images/Ic_Award.png"),
                GuruTabBarItem(title: 'title1', icon: "assets/images/Ic_Award.png")
              ]),
              GuruSliderBar(
                controller: controller.sliderbarController,
                items: const [
                  GuruSliderBarItem(data: 2, multipleImage: 'assets/images/slider_bar/x2.png', background: BoxDecoration(color: Color(0xFFDD192A))),
                  GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x3.png', background: BoxDecoration(color: Color(0xFFF98B1B))),
                  GuruSliderBarItem(data: 4, multipleImage: 'assets/images/slider_bar/x4.png', background: BoxDecoration(color: Color(0xFFFFCC00))),
                  GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x5.png', background: BoxDecoration(color: Color(0xFF73AC35))),
                  GuruSliderBarItem(data: 2, multipleImage: 'assets/images/slider_bar/x4.png', background: BoxDecoration(color: Color(0xFFFFCC00))),
                  GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x3.png', background: BoxDecoration(color: Color(0xFFF98B1B))),
                  GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x2.png', background: BoxDecoration(color: Color(0xFFDD192A))),
                ],
                horizontalOffset: 10,
              ),
              GuruButton(size: Size(200, 20), action: 'stop', onPressed: () {
                controller.sliderbarController.stop();
              }),
              GuruButton(size: Size(200, 20), action: 'play', onPressed: () {
                controller.sliderbarController.start();
              }),
              GuruAssetBar(
                style: GuruAssetBarStyle.igc,
                balanceStream: Stream.periodic(
                    const Duration(seconds: 3000), (count) => count * 1000)),
               GuruAssetBar(
                style: GuruAssetBarThemeMixin.joker,
                balanceStream: Stream.periodic(
                    const Duration(seconds: 3000), (count) => count * 1000)),   

              GuruButton(size: Size(200, 20), action: 'play', onPressed: () {
                controller.showAssetsOverlay();
              }),

              GuruButton(size: Size(200, 20), action: 'watermark', onPressed: () {
                controller.showWaterMarkOverlay();
              }),
            ]),),
          )
        ];
      },
    );
  }
}