import 'package:animated_text_kit/animated_text_kit.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 'package:intl/intl.dart';
import 'package:scroll_date_picker/scroll_date_picker.dart';

import '../controllers/welcome_controller.dart';

class WelcomeView extends GetView<WelcomeController> {
  const WelcomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.welcomeBg,
            fit: BoxFit.fill,
          ),
        ),
        child: Obx(
          () => Scaffold(
            backgroundColor: Colors.transparent,
            body: controller.step.value == 0
                ? buildTip(context)
                : controller.step.value == 1
                    ? buildInput(context)
                    : controller.step.value == 2
                        ? buildPartner(context)
                        : buildConfirm(context),
          ),
        ),
      ),
    );
  }

  Widget buildTip(BuildContext context) {
    return GestureDetector(
      onTap: () {
        controller.step.value = 1;
      },
      child: Stack(
        children: [
          Positioned(
            left: 524.w,
            top: 180.h,
            child: Text(
              '探梦者你好',
              style: TextStyles.mediumWhiteShadow26_034,
            ),
          ),
          Positioned(
            left: 498.w,
            top: 235.h,
            child: Text(
              '这里是建木遗迹',
              style: TextStyles.mediumWhiteShadow26_034,
            ),
          ),
          Positioned(
            left: 524.w,
            top: 290.h,
            child: Text(
              '在探索之前',
              style: TextStyles.mediumWhiteShadow26_034,
            ),
          ),
          Positioned(
            left: 537.w,
            top: 345.h,
            child: Text(
              '请告诉我',
              style: TextStyles.mediumWhiteShadow26_034,
            ),
          ),
          Positioned(
            left: 564.w,
            bottom: 98.h,
            child: GestureDetector(
              onVerticalDragStart: (details) {
                controller.step.value = 1;
              },
              child: Images.up,
            ),
          ),
          Positioned(
            left: 452.w,
            bottom: 5.h,
            child: GestureDetector(
              onVerticalDragStart: (details) {
                controller.step.value = 1;
              },
              child: Images.welcomeBegin,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildInput(BuildContext context) {
    return Row(
      children: [
        const RSizedBox(width: 339),
        RSizedBox(
          width: 498.0,
          height: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              children: [
                const RSizedBox(
                  height: 100.0,
                ),
                Container(
                  width: 498.w,
                  height: 450.h,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: Images.welcomeInputBg,
                      fit: BoxFit.fill,
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        '探险者信息录入',
                        style: TextStyles.mediumWhite26,
                      ),
                      const RSizedBox(
                        height: 24,
                      ),
                      buildName(context),
                      const RSizedBox(
                        height: 18,
                      ),
                      buildBirthday(context),
                      const RSizedBox(
                        height: 24,
                      ),
                      RSizedBox(
                        height: 29.0,
                        width: 386,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            buildRadio('我是男生', 2),
                            const RSizedBox(width: 68),
                            buildRadio('我是女生', 1),
                          ],
                        ),
                      ),
                      const RSizedBox(
                        height: 45,
                      ),
                      ImageTxtButton(
                        text: '确定',
                        imgName:
                            'welcome/btn_icon_confirm${controller.clickable.value ? '_enable' : ''}',
                        textStyle: TextStyles.mediumWhiteShadow26_014,
                        width: 386.0,
                        height: 66.0,
                        onPressed: () {
                          if (controller.clickable.value) {
                            controller.step.value = 2;
                          }
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget buildName(BuildContext context) {
    return Container(
      height: 46.h,
      width: 386.w,
      decoration: BoxDecoration(
        color: Colors.transparent,
        border: Border.all(
          color: const Color(0xFF8FC1FF),
          width: 1.r,
        ),
        borderRadius: BorderRadius.all(Radius.circular(6.r)),
      ),
      padding: REdgeInsets.only(left: 13, right: 13, bottom: 0, top: 4),
      child: TextField(
        controller: controller.textController,
        focusNode: controller.focusNode,
        cursorColor: Colors.white,
        style: TextStyles.mediumWhiteShadow16_034,
        autofocus: false,
        maxLines: 1,
        minLines: 1,
        textInputAction: TextInputAction.done,
        onEditingComplete: () {
          controller.focusNode.unfocus();
        },
        decoration: InputDecoration(
          hintText: '请输入您的名称',
          hintStyle: TextStyles.mediumColor16,
          counterText: '',
          border: InputBorder.none,
        ),
      ),
    );
  }

  Widget buildBirthday(BuildContext context) {
    return Container(
      height: 46.h,
      width: 386.w,
      decoration: BoxDecoration(
        color: Colors.transparent,
        border: Border.all(
          color: const Color(0xFF8FC1FF),
          width: 1.r,
        ),
        borderRadius: BorderRadius.all(Radius.circular(6.r)),
      ),
      padding: REdgeInsets.symmetric(horizontal: 13.0, vertical: 5.0),
      child: GestureDetector(
        onTap: () {
          controller.pullStatus.value = 'up';
          dateDialog(context);
        },
        child: Obx(
          () => Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: Text(
                  controller.birthday.value.isEmpty
                      ? '请选择你的出生日期'
                      : controller.birthday.value,
                  style: controller.birthday.value.isEmpty
                      ? TextStyles.mediumColor18
                      : TextStyles.mediumWhite18,
                ),
              ),
              Gaps.hGap4,
              controller.pullStatus.value == 'down'
                  ? Images.pullDown
                  : Images.pullUp,
            ],
          ),
        ),
      ),
    );
  }

  Widget buildRadio(String name, int value) {
    return GestureDetector(
      onTap: () async {
        controller.selectedGender.value = value;
        await controller.changeGende(value);
      },
      child: Obx(
        () => Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            value == controller.selectedGender.value
                ? Images.selectPre
                : Images.selectDefault,
            const RSizedBox(
              width: 10,
            ),
            Text(
              name,
              textAlign: TextAlign.center,
              style: value == controller.selectedGender.value
                  ? TextStyles.mediumWhite21_024
                  : TextStyles.mediumColor21,
            )
          ],
        ),
      ),
    );
  }

  void dateDialog(BuildContext context) {
    SmartDialog.showAttach(
      targetContext: null,
      targetBuilder: (Offset targetOffset, Size targetSize) =>
          Offset(588.w, 330.h),
      nonAnimationTypes: [SmartNonAnimationType.maskClose_nonAnimation],
      onDismiss: () {
        controller.pullStatus.value = 'down';
        var formatter = DateFormat('yyyy-MM-dd');
        controller.birthday.value =
            formatter.format(controller.selectedDate.value);
        controller.verify();
      },
      builder: (_) {
        return Obx(
          () => Container(
            width: 386.w,
            height: 200.h,
            decoration: const BoxDecoration(
              color: Color(0xFF2D306C),
            ),
            child: ScrollDatePicker(
              minimumDate:
                  DateTime.now().subtract(const Duration(days: 20 * 365)),
              selectedDate: controller.selectedDate.value,
              locale: const Locale('zh', 'CH'),
              options: const DatePickerOptions(
                backgroundColor: Color(0xFF2D306C),
                itemExtent: 36,
                diameterRatio: 3,
              ),
              indicator: Container(
                height: 36,
                decoration: BoxDecoration(
                  color: const Color(0x33FFFFFF),
                  border: Border.all(
                    color: const Color(0xFF8FC1FF),
                    width: 1.r,
                  ),
                ),
              ),
              scrollViewOptions: DatePickerScrollViewOptions(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                year: controller.dateScrollViewDetailOptions,
                month: controller.dateScrollViewDetailOptions,
                day: controller.dateScrollViewDetailOptions,
              ),
              onDateTimeChanged: (DateTime value) {
                controller.selectedDate.value = value;
              },
            ),
          ),
        );
      },
    );
  }

  Widget buildPartner(BuildContext context) {
    return GestureDetector(
      onVerticalDragStart: (details) {
        controller.step.value = 3;
      },
      child: Stack(
        children: [
          Positioned(top: 42.h, left: 149.w, child: Images.ip),
          Positioned(
            top: 76.h,
            left: 451.w,
            child: Container(
              width: 465.w,
              height: 221.h,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: Images.welcomeDialog,
                  fit: BoxFit.fill,
                ),
              ),
              padding: REdgeInsets.only(top: 45.0, left: 45.0, right: 45.0),
              child: DefaultTextStyle(
                style: TextStyles.mediumWhiteShadowHeight18_034,
                child: AnimatedTextKit(
                  totalRepeatCount: 1,
                  animatedTexts: [
                    TypewriterAnimatedText(
                      '${controller.textController.text}你好！ 我是一只天马。我们天马族一直生活在这里。与探梦者为伴。接下来让我来做你探索的伙伴吧。',
                      speed: const Duration(milliseconds: 150),
                      cursor: '',
                    ),
                  ],
                ),
              ),
            ),
          ),
          Positioned(bottom: 5.h, left: 452.w, child: Images.welcomeBegin),
          Positioned(bottom: 98.h, left: 564.w, child: Images.up),
        ],
      ),
    );
  }

  Widget buildConfirm(BuildContext context) {
    return Stack(
      children: [
        Positioned(top: 42.h, left: 149.w, child: Images.ip),
        Positioned(
          top: 76.h,
          left: 451.w,
          child: Container(
            width: 464.w,
            height: 270.h,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: Images.questionDialog,
                fit: BoxFit.fill,
              ),
            ),
            padding: REdgeInsets.only(top: 45.0, left: 45.0, right: 45.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  '每个来到建木之境的探梦者，都需要先选定自己的【梦想职业】，才能继续探索哦。准备好了吗？',
                  style: TextStyles.mediumWhiteShadow18_034,
                ),
                const RSizedBox(
                  height: 36.0,
                ),
                ImageTxtButton(
                  text: '准备好了',
                  imgName: 'question/btn_icon_begin',
                  textStyle: TextStyles.mediumWhite20_014,
                  width: 186.0,
                  height: 54.0,
                  onPressed: () async {
                    await controller.confirm();
                  },
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}