import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/feedback/feedback_controller.dart';
import 'package:get/get.dart';
import 'package:keyboard/resource/colors.gen.dart';
import 'package:keyboard/widget/commonAppBar.dart';

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

class FeedbackPage extends BasePage<FeedbackController> {
  const FeedbackPage({super.key});

  static start() {
    Get.toNamed(RoutePath.feedback);
  }

  @override
  bool immersive() {
    return false;
  }

  @override
  Color backgroundColor() => Color(0xFFF6F5FA);

  @override
  Widget buildBody(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: backgroundColor(),
      appBar: CommonAppBar(
        title: StringName.feedback,
        backgroundColor: backgroundColor,
        onBack: () {
          controller.backClick();
        },
      ),
      body: Container(
        margin: EdgeInsets.only(left: 16.w, right: 16.w, top: 20.h),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              padding: EdgeInsets.all(16.r),
              // height: 221.w,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8.r),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          StringName.feedbackContentTitle,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        SizedBox(height: 8.h),
                        SizedBox(
                          height: 161.h,
                          child: TextField(
                            maxLength: 300,
                            maxLines: null,
                            expands: true,
                            textAlignVertical: TextAlignVertical.top,
                            decoration: InputDecoration(
                              counterText: "",
                              hintText: StringName.feedbackContentHint,
                              hintStyle: TextStyle(
                                color: Colors.black.withAlpha(66),
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10.r),
                                borderSide: BorderSide.none, // 移除边框线
                              ),
                              filled: true,
                              fillColor: const Color(0xFFF5F4F9),
                            ),
                            onChanged: (value) {
                              controller.onContentChanged(value);
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(height: 8.h),
            Container(
              padding: EdgeInsets.all(16.r),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    StringName.feedbackPhone,
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.black.withAlpha(204),
                    ),
                  ),
                  const SizedBox(height: 8),
                  SizedBox(
                    height: 48.h,
                    child: TextField(
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      maxLength: 11,
                      maxLines: null,
                      expands: true,
                      textAlignVertical: TextAlignVertical.top,
                      decoration: InputDecoration(
                        counterText: "",
                        hintText: StringName.feedbackPhoneHint,
                        hintStyle: TextStyle(color: Colors.black.withAlpha(66)),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10.r),
                          borderSide: BorderSide.none,
                        ),
                        filled: true,
                        fillColor: const Color(0xFFF5F4F9),
                      ),
                      onChanged: (value) {
                        controller.onPhoneChanged(value);
                      },
                    ),
                  ),
                ],
              ),
            ),

            Spacer(),
            ElevatedButton(
              onPressed: () {
                controller.submitClick();
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.purple,
                padding: EdgeInsets.symmetric(vertical: 16.r),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(100.r),
                ),
              ),
              child: Text(
                StringName.feedbackSubmit,
                style: TextStyle(fontSize: 16.r, color: Colors.white),
              ),
            ),
            SizedBox(height: 16.h),
          ],
        ),
      ),
    );
  }
}
