import 'package:dreampad/app/models/models.dart';
import 'package:dreampad/app/routes/app_pages.dart';
import 'package:dreampad/app/shared/shared.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';

import '../controllers/home_controller.dart';
import '../models/explore_app_model.dart';
import '../widgets/explore_widget.dart';
import '../widgets/goal_dialog.dart';
import '../widgets/user_widget.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.homeBg,
            fit: BoxFit.fill,
          ),
        ),
        child: Obx(
          () => Scaffold(
            backgroundColor: Colors.transparent,
            body: controller.create.value
                ? Center(
                    child: Images.homeCreate,
                  )
                : buildBody(context),
          ),
        ),
      ),
    );
  }

  Widget buildBody(BuildContext context) {
    return Obx(
      () => Stack(
        children: [
          Container(
            height: 458.h,
            width: 996.w,
            margin: REdgeInsets.only(
              left: 90.0,
              top: 178.0,
            ),
            color: Colors.transparent,
            child: controller.prompt.value ? null : buildApp(context),
          ),
          Container(
            height: 650.h,
            width: 630.w,
            margin: REdgeInsets.only(
              left: 262.0,
              top: 0.0,
            ),
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: Images.homeTree,
                fit: BoxFit.fill,
              ),
            ),
            child: treeWidget(),
          ),
          Container(
            height: 228.h,
            width: 1176.w,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: Images.homeColud,
                fit: BoxFit.fill,
              ),
            ),
            child: titleWidget(),
          ),
          Container(
            height: 650.h,
            width: 630.w,
            margin: REdgeInsets.only(
              left: 262.0,
              top: 0.0,
            ),
            child: goalWidget(),
          ),
          controller.prompt.value
              ? Container()
              : Positioned(
                  left: 49.w,
                  top: 50.h,
                  child: UserWidget(
                    account: controller.account,
                    gender: controller.gender,
                    occupationName: controller.occupationName,
                  ),
                ),
          controller.prompt.value
              ? Container()
              : Positioned(
                  right: 49.w,
                  top: 50.h,
                  child: ExploreWidget(
                    explored: controller.explored.value,
                    exploreCount: controller.exploreCount.value,
                  ),
                ),
          controller.prompt.value
              ? Container()
              : Positioned(
                  right: 0.w,
                  bottom: 0.h,
                  child: Container(
                    height: 24.h,
                    width: 69.w,
                    decoration: BoxDecoration(
                      color: const Color(0xFF000000).withOpacity(0.4),
                      borderRadius: BorderRadius.only(
                          topLeft: const Radius.circular(10.0).r),
                    ),
                    padding: REdgeInsets.all(5.0),
                    child: GestureDetector(
                      onTap: () async {
                        await controller.reset();
                      },
                      child: Text.rich(
                        TextSpan(
                          children: [
                            WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: Images.homeReset,
                            ),
                            const WidgetSpan(child: RSizedBox(width: 2.0)),
                            WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: Text(
                                '重新体验',
                                style: TextStyles.mediumWhite10,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
        ],
      ),
    );
  }

  Widget goalWidget() {
    return Stack(
      children: [
        controller.explored.value
            ? Positioned(
                left: 15.w,
                top: 20.h,
                child: Container(
                  height: 311.h,
                  width: 230.w,
                  color: Colors.transparent,
                  child: fourthGoalWidget(),
                ),
              )
            : Container(),
        controller.explored.value
            ? Positioned(
                left: 352.w,
                top: 0.0,
                child: Container(
                  height: 221.h,
                  width: 281.w,
                  color: Colors.transparent,
                  child: thirdGoalWidget(),
                ),
              )
            : Container(),
        controller.explored.value
            ? Positioned(
                left: 363.w,
                top: 180.h,
                child: Container(
                  height: 240.h,
                  width: 240.w,
                  color: Colors.transparent,
                  child: secondGoalWidget(),
                ),
              )
            : Container(),
      ],
    );
  }

  Widget fourthGoalWidget() {
    return Stack(
      children: [
        Positioned(
          left: 115.w,
          top: 102.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {},
            child: Text(
              '更长期目标',
              style: TextStyles.boldWhiteShadow18_111,
            ),
          ),
        ),
        Positioned(
          left: 28.w,
          top: 62.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(3));
            },
            child: Text(
              '18岁目标',
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          left: 52.w,
          top: 129.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(4));
            },
            child: Text(
              '22岁目标',
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          left: 128.w,
          top: 168.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(4));
            },
            child: Text(
              '30岁目标',
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
      ],
    );
  }

  Widget thirdGoalWidget() {
    return Stack(
      children: [
        Positioned(
          left: 51.w,
          top: 102.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(2));
            },
            child: Text(
              '三年内目标',
              style: TextStyles.boldWhiteShadow18_111,
            ),
          ),
        ),
        Positioned(
          right: 56.w,
          top: 61.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '科学竞赛参与',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          right: 66.w,
          top: 123.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '英语能力加强',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          left: 98.w,
          bottom: 18.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '拓展科学知识',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
      ],
    );
  }

  Widget secondGoalWidget() {
    return Stack(
      children: [
        Positioned(
          left: 43.w,
          top: 66.h,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              showGoalDialog(controller.getGoal(1));
            },
            child: Text(
              '今年目标',
              style: TextStyles.boldWhiteShadow18_111,
            ),
          ),
        ),
        Positioned(
          right: 34.w,
          top: 40.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '课外阅读提升',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          right: 38.w,
          top: 93.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '科学兴趣培养',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
        Positioned(
          left: 92.w,
          top: 120.h,
          child: Container(
            height: 36.h,
            width: 56.w,
            color: Colors.transparent,
            child: Text(
              '基础教学能力',
              textAlign: TextAlign.center,
              style: TextStyles.boldWhiteShadow14_111,
            ),
          ),
        ),
      ],
    );
  }

  Widget titleWidget() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const RSizedBox(height: 24),
        Text(
          '梦想职业',
          style: TextStyles.mediumWhiteShadow20_114,
        ),
        Text(
          controller.occupationName,
          style: TextStyles.boldColorShadow28_012,
        ),
      ],
    );
  }

  Widget treeWidget() {
    return Stack(
      children: [
        Positioned(
          left: 218.w,
          top: 244.h,
          child: GestureDetector(
            onTap: () async {
              await Get.toNamed(Routes.HOME + Routes.EXPLORE);
            },
            child: Container(
              width: 210.w,
              height: 216.h,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: Images.homeShine,
                  fit: BoxFit.fill,
                ),
              ),
              child: Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      '梦想',
                      style: TextStyles.boldWhiteShadow22_012,
                    ),
                    Text(
                      '探索',
                      style: TextStyles.boldWhiteShadow22_012,
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
        controller.explored.value
            ? Positioned(
                left: 15.w,
                top: 20.h,
                child: Container(
                  height: 311.h,
                  width: 230.w,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: Images.homeFourthLeaf,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              )
            : Container(),
        controller.explored.value
            ? Positioned(
                left: 352.w,
                top: 0.0,
                child: Container(
                  height: 221.h,
                  width: 281.w,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: Images.homeThirdLeaf,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              )
            : Container(),
        controller.explored.value
            ? Positioned(
                left: 363.w,
                top: 180.h,
                child: Container(
                  height: 240.h,
                  width: 240.w,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: Images.homeSecondLeaf,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              )
            : Container(),
        controller.prompt.value ? Container() : firstLeafWidget(),
        Positioned(
          left: 168.w,
          top: 244.h,
          child: Images.homeIp,
        ),
        Positioned(
          left: 135.w,
          bottom: 10.h,
          child: GestureDetector(
            onTap: () {},
            child: controller.explored.value
                ? Images.homePicturebook
                : Images.homePicturebookGrey,
          ),
        ),
        Positioned(
          left: 316.w,
          bottom: 10.h,
          child: GestureDetector(
            onTap: () {},
            child: controller.explored.value
                ? Images.homeProgramme
                : Images.homeProgrammeGrey,
          ),
        ),
        Positioned(
          right: 79.w,
          bottom: 10.h,
          child: GestureDetector(
            onTap: () {},
            child: controller.explored.value
                ? Images.homeMusic
                : Images.homeMusicGrey,
          ),
        ),
      ],
    );
  }

  void showGoalDialog(Goal goal) {
    SmartDialog.show(
      maskColor: const Color(0xFF02184B).withOpacity(0.7),
      alignment: Alignment.center,
      builder: (_) {
        return GoalDialog(
          goal: goal,
        );
      },
    );
  }

  Widget firstLeafWidget() {
    return Positioned(
      right: 68.w,
      top: 326.h,
      child: Container(
        height: 60.h,
        width: 171.w,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.homeFirstLeaf,
            fit: BoxFit.fill,
          ),
        ),
        child: Stack(
          children: [
            Positioned(
              left: 23.w,
              top: 26.h,
              child: Text(
                '本月已点亮${controller.exploreCount.value}个知识点',
                style: TextStyles.mediumWhiteShadow12_111,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildApp(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RSizedBox(
          width: 84,
          child: Wrap(
            direction: Axis.horizontal,
            runSpacing: 22.h,
            alignment: WrapAlignment.center,
            children: controller.leftExploreApps.map((e) {
              return exploreAppWidget(e);
            }).toList(),
          ),
        ),
        RSizedBox(
          width: 120,
          child: Wrap(
            direction: Axis.horizontal,
            runSpacing: 22.h,
            alignment: WrapAlignment.center,
            children: controller.rightExploreApps.map((e) {
              return exploreAppWidget(e);
            }).toList(),
          ),
        ),
      ],
    );
  }

  Widget exploreAppWidget(ExploreApp app) {
    return GestureDetector(
      onTap: () {
        if (controller.explored.value) {}
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          LoadAssetImage(
            'home/${controller.explored.value ? app.icon : app.grayIcon}',
            height: 74.w,
            width: 74.w,
            fit: BoxFit.fill,
          ),
          const RSizedBox(height: 2),
          Text(
            app.name!,
            style: TextStyles.boldWhite16,
          )
        ],
      ),
    );
  }
}