import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/change/birthday/change_birthday_controller.dart';
import 'package:keyboard/utils/styles.dart';
import 'package:keyboard/widget/birthday_date_picker.dart';

import '../../../resource/assets.gen.dart';
import '../../../router/app_pages.dart';

class ChangeBirthdayPage extends BasePage<ChangeBirthdayController> {
  const ChangeBirthdayPage({super.key});

  static Future start({String? birthday}) async {
    return Get.toNamed(
      RoutePath.changeBirthday,
      arguments: {"birthday": birthday},
    );
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Color backgroundColor() {
    return const Color(0xFFF6F5FA);
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
        SafeArea(
          child: Stack(
            children: [
              SingleChildScrollView(
                child: Column(
                  children: [
                    _buildTitle(),
                    SizedBox(height: 40.h),
                    _buildContent(context),
                  ],
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.only(bottom: 32.h),
                  child: Obx(() {
                    return _buildSaveButton(
                      onTap: () {
                        controller.clickSave();
                      },
                      isEnable: controller.constellation.value.name.isNotEmpty,
                    );
                  }),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  _buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 12.h, left: 16.w, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: controller.clickBack,
            child: Assets.images.iconMineBackArrow.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
        ],
      ),
    );
  }

  _buildContent(BuildContext context) {
    return Column(
      children: [
        Text('选择生日', style: Styles.getTextStyleBlack204W500(22.sp)),
        Container(
          margin: EdgeInsets.only(top: 119.h),
          alignment: Alignment.center,
          child: Container(child: _datePicker(context)),
        ),
        SizedBox(height: 18.h),
        Obx(() {
          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              // 星座
              Container(
                width: 26.r,
                height: 26.r,
                decoration: ShapeDecoration(
                  color: Colors.white,
                  shape: OvalBorder(
                    side: BorderSide(width: 1.r, color: Colors.white),
                  ),
                  shadows: [
                    BoxShadow(
                      color: Color(0x30A46EFE),
                      blurRadius: 2.r,
                      offset: Offset(0, 2),
                      spreadRadius: 0,
                    ),
                  ],
                ),
                child: Container(
                    margin: EdgeInsets.all(2.r),
                    width: 22.r,
                    height: 22.r,
                    decoration: ShapeDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [
                          const Color(0xFF7D46FC),
                          const Color(0xFFBC87FF),
                        ],
                      ),
                      shape: OvalBorder(),
                      shadows: [
                        BoxShadow(
                          color: Color(0x30A46EFE),
                          blurRadius: 2.r,
                          offset: Offset(0, 2.08),
                          spreadRadius: 0,
                        ),
                      ],
                    ),
                    child: Center(child: controller.constellation.value.image.image(width: 14.r,height: 14.r,fit: BoxFit.contain),)
                ),
              ),
              SizedBox(width: 7.w,),

              Text(
                controller.constellation.value.name,
                style: Styles.getTextStyleBlack204W500(14.sp),
              ),
            ],
          );
        }),
      ],
    );
  }

  SizedBox _datePicker(BuildContext context) {
    var widget = SizedBox(
      height: 150.h,
      width: 320.w,
      // child: DatePickerWidget(),
      child: BirthdayDatePicker(
        initialDate: controller.initialDate,
        minimumDate: controller.minimumDate,
        maximumDate: DateTime.now(),
        onDateChanged: (date) {
          controller.updateConstellation(date);
        },
      ),
    );
    return widget;
  }

  Widget _buildSaveButton({required VoidCallback onTap, required isEnable}) {
    return GestureDetector(
      onTap: () {
        onTap();
      },
      child: Container(
        width: 260.w,
        height: 48.h,
        decoration:
            isEnable
                ? Styles.getActivateButtonDecoration(31.r)
                : Styles.getInactiveButtonDecoration(31.r),
        child: Center(
          child: Text(
            '保存',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }
}
