import 'package:dreampad/app/modules/select/views/animated_horizon_column_widget.dart';
import 'package:dreampad/app/routes/app_pages.dart';
import 'package:dreampad/app/shared/shared.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';

import '../controllers/select_controller.dart';

class SelectView extends GetView<SelectController> {
  const SelectView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.selectBg,
            fit: BoxFit.fill,
          ),
        ),
        child: Obx(
          () => Scaffold(
            backgroundColor: Colors.transparent,
            body: controller.confirm.value
                ? buildConfirm(context)
                : buildSelect(context),
          ),
        ),
      ),
    );
  }

  Widget buildSelect(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 2.h,
          left: 412.w,
          child: _ShowUp(
            child: Container(
              width: 360.w,
              height: 164.h,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: Images.selectTitle1,
                  fit: BoxFit.fill,
                ),
              ),
              padding: REdgeInsets.only(left: 113.0, top: 70.0),
              child: Text(
                '梦想职业',
                style: TextStyles.boldWhiteShadow34_200,
              ),
            ),
          ),
        ),
        buildSelectOccupation(context),
      ],
    );
  }

  Widget buildSelectOccupation(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(
              () => AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                child: AnimatedHorizonColumnWidget(
                  key: ValueKey(controller.selectOccupations.first.value.name ?? ''),
                  keyBuilder: (index) => controller.selectOccupations[index].value.name ?? '',
                  children: controller.selectOccupations.map((t) {
                    return GestureDetector(
                      key: ValueKey(t.value.id),
                      onTap: () async {
                        if (t.value.enable!) {
                          await controller.selectedOccupation(t.value);
                        } else {
                          SmartDialog.showToast('开发中，敬请期待…');
                        }
                      },
                      child: Container(
                        width: 218.w,
                        height: 366.h,
                        decoration: BoxDecoration(
                          color: const Color(0xFF4A3FAE).withOpacity(0.6),
                        ),
                        padding: REdgeInsets.all(6.0),
                        child: Stack(
                          children: [
                            LoadAssetImage(
                              'select/${t.value.vImage}',
                              height: 354.h,
                              width: 206.w,
                              fit: BoxFit.fill,
                            ),
                            LoadAssetImage(
                              'select/${t.value.id == controller.selectOccupation.value?.id! || t.value.selected! ? 'label_state_pre' : 'label_state_default'}',
                              height: 354.h,
                              width: 206.w,
                              fit: BoxFit.fill,
                            ),
                            t.value.id == controller.selectOccupation.value?.id!
                                ? LoadAssetImage(
                                    'select/btn_icon_selected',
                                    height: 65.h,
                                    width: 65.w,
                                  )
                                : Container(),
                            Positioned(
                              bottom: 43.h,
                              left: 13.w,
                              child: Text(
                                t.value.enName!.toUpperCase(),
                                style: TextStyles.pmzdWhiteShadow22_022,
                              ),
                            ),
                            Positioned(
                              bottom: 8.h,
                              left: 14.w,
                              child: Text(
                                t.value.name!,
                                style: TextStyles.pmzdWhiteShadow26_022,
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
            ),
            buildSelectChange(context),
          ],
        ),
        const RSizedBox(height: 14.0),
        buildSelectBtn(context),
        const RSizedBox(height: 50.0),
      ],
    );
  }

  Widget buildSelectBtn(BuildContext context) {
    return Obx(
      () => Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _ShowUp(
            child: ImageTxtButton(
              text: '还没想好',
              imgName: 'select/btn_bg',
              textStyle: TextStyles.mediumWhiteShadow28_022,
              width: 264.0,
              height: 80.0,
              onPressed: () async {
                var data = await Get.toNamed(Routes.QUESTION);
                if (data != null) {
                  await controller.recommendOccupation(int.parse(data['id']));
                }
              },
            ),
          ),
          const RSizedBox(width: 34.0),
          _ShowUp(
            child: ImageTxtButton(
              text: '输入我的想法',
              imgName: 'select/btn_bg',
              textStyle: TextStyles.mediumWhiteShadow28_022,
              width: 264.0,
              height: 80.0,
              onPressed: () {
                SmartDialog.showToast('开发中，敬请期待…');
              },
            ),
          ),
          const RSizedBox(width: 34.0),
              AnimatedVisibilityWidget(
                isVisible: controller.selectOccupation.value != null,
                child: ImageTxtButton(
                    text: '决定了',
                    imgName: 'select/btn_icon_confirm',
                    textStyle: TextStyles.mediumWhiteShadow28_022,
                    width: 264.0,
                    height: 80.0,
                    onPressed: () {
                      controller.confirm.value = true;
                      controller.confirmTitle.value = '你的梦想职业是';
                    },
                  ),
              ),
        ],
      ),
    );
  }

  Widget buildSelectChange(BuildContext context) {
    return GestureDetector(
      onTap: () async {
        await controller.change();
      },
      child: Padding(
        padding: REdgeInsets.only(left: 6),
        child: Container(
          width: 72.w,
          height: 364.h,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: Images.selectChange,
              fit: BoxFit.fill,
            ),
          ),
          child: Center(
            child: Text(
              '换一批',
              style: TextStyles.mediumColorShadow16_032,
            ),
          ),
        ),
      ),
    );
  }

  Widget buildConfirm(BuildContext context) {
    return Obx(
      () => Stack(
        children: [
          Positioned(
            left: 90.w,
            top: 62.h,
            child: Container(
              width: 999.w,
              height: 558.h,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: Images.selectBgBorder,
                  fit: BoxFit.fill,
                ),
              ),
              padding: REdgeInsets.only(
                  top: 13.0, left: 13.0, bottom: 10.0, right: 16.0),
              child: LoadAssetImage(
                'select/${controller.selectOccupation.value!.hImage!}',
                height: 534.h,
                width: 971.w,
                fit: BoxFit.fill,
              ),
            ),
          ),
          Positioned(
            top: 64.h,
            left: 363.w,
            child: Container(
              width: 450.w,
              height: 61.h,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: Images.selectTitle2,
                  fit: BoxFit.fill,
                ),
              ),
              child: Center(
                child: Text(
                  controller.confirmTitle.value,
                  style: TextStyles.boldWhiteShadow34_200,
                ),
              ),
            ),
          ),
          buildConfirmBtn(context, controller.selectOccupation.value!.name!),
        ],
      ),
    );
  }

  Widget buildConfirmBtn(BuildContext context, String name) {
    return Positioned(
      bottom: 12.h,
      left: 243.w,
      child: Container(
        width: 713.w,
        height: 222.h,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.selectBgShadow,
            fit: BoxFit.fill,
          ),
        ),
        child: Stack(
          children: [
            Positioned(
              left: 88.w,
              top: 90.h,
              child: GestureDetector(
                onTap: () {
                  controller.confirm.value = false;
                },
                child: Container(
                  width: 285.w,
                  height: 45.h,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: Images.selectBgReflect,
                      fit: BoxFit.fill,
                    ),
                  ),
                  padding: REdgeInsets.only(left: 40.0, top: 5.0),
                  child: Text(
                    '我再想想',
                    style: TextStyles.mediumWhite22_012_2,
                  ),
                ),
              ),
            ),
            Positioned(
              right: 87.w,
              top: 90.h,
              child: GestureDetector(
                onTap: () async {
                  await controller.openDream();
                },
                child: Container(
                  width: 258.w,
                  height: 45.h,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: Images.selectBgGenerate,
                      fit: BoxFit.fill,
                    ),
                  ),
                  padding: REdgeInsets.only(left: 92.0, top: 5.0),
                  child: Text(
                    '生成梦之建木',
                    style: TextStyles.mediumWhite22_012_2,
                  ),
                ),
              ),
            ),
            Positioned(
              left: 221.w,
              top: 60.h,
              child: Container(
                width: 242.w,
                height: 98.h,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: Images.selectBgCareer,
                    fit: BoxFit.fill,
                  ),
                ),
                child: Center(
                  child: Text(
                    name,
                    style: TextStyles.boldWhiteShadow28_110,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _ShowUp extends HookWidget {
  const _ShowUp({
    required this.child,
  });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final controller =
    useAnimationController(duration: const Duration(milliseconds: 300));
    useMemoized(() async {
      await Future.delayed(const Duration(milliseconds: 300));
      controller.forward();
    });
    return FadeTransition(
      opacity: CurvedAnimation(
          curve: Curves.easeIn,
          parent: controller
      ),
      child: child,
    );
  }
}