import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_view.dart';
import 'package:keyboard/module/new_user/new_user_controller.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';

import '../../../../resource/assets.gen.dart';
import '../../../../resource/string.gen.dart';
import '../../../../utils/styles.dart';
import '../../../../widget/birthday_date_picker.dart';

class StepBirthdayView extends BaseView<NewUserController> {
  const StepBirthdayView({super.key});

  @override
  Color backgroundColor() {
    return Colors.transparent;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(left: 30.w, right: 30.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(children: [
                Text(
                  StringName.newUserBirthdayTitle,
                  style: TextStyle(
                    color: Colors.black.withAlpha(204),
                    fontSize: 22.sp,
                    fontWeight: FontWeight.w500,
                    height: 0,
                  ),
                ),
                Assets.images.iconNewUserBirthdayLogo.image(
                  width: 50.w,
                  height: 36.w,
                  fit: BoxFit.contain,
                ),
              ],),
              SizedBox(height: 7.h),
              Text(
                StringName.newUserBirthdayDesc,
                style: TextStyle(
                  color: Colors.black.withAlpha(153),
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ],
          ),
        ),
        SizedBox(height: 72.w),
        _buildContent(context),
      ],
    );
  }

  _buildContent(BuildContext context) {
    return Column(
      children: [
        Container(child: _datePicker(context)),
        SizedBox(height: 20.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;
  }
}