import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:gascom/constants/app_theme.dart';
import 'package:gascom/utils/text_field_4_space_formatter.dart';
import 'package:gascom/utils/text_field_date_formatter.dart';
import 'package:gascom/widgets/app_button.dart';
import 'package:gascom/widgets/app_text_field.dart';
import 'package:gascom/widgets/custom_app_bar.dart';

class PaymentScreen extends StatefulWidget {
  const PaymentScreen({
    super.key,
    required this.title,
    required this.onPaymentComplete,
  });

  final String title;
  final void Function() onPaymentComplete;

  @override
  State<PaymentScreen> createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  TextEditingController nameController = TextEditingController();
  TextEditingController cardNumberController = TextEditingController();
  TextEditingController expireController = TextEditingController();
  TextEditingController cvvController = TextEditingController();

  bool checkBoxValue = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: const CustomAppBar(),
        body: SafeArea(
          child: ListView(
            padding: const EdgeInsets.all(20),
            children: [
              AutoSizeText(
                widget.title,
                style: Theme.of(context).textTheme.bodyLarge,
              ),
              const SizedBox(height: 20),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 5),
                padding: const EdgeInsets.all(15),
                // width: double.infinity,
                decoration: BoxDecoration(
                  color: AppTheme.textColor,
                  borderRadius: BorderRadius.circular(24),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AutoSizeText(
                      "5,000,000 د.ع",
                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                          fontWeight: FontWeight.bold,
                          color: AppTheme.blackColor),
                    ),
                    const SizedBox(
                      height: 2,
                    ),
                    AutoSizeText(
                      "مبلغ حصة كاز اويل",
                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: AppTheme.blackColor,
                          fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(height: 2),
                    const Divider(
                      color: Colors.grey,
                      thickness: 1,
                      height: 30,
                    ),
                    AutoSizeText(
                      "الاسم على البطاقة",
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                            color: AppTheme.blackColor,
                          ),
                    ),
                    const SizedBox(height: 5),
                    AppTextField(
                      fillColor: Color(0xFFCBCBCB),
                      isFilled: true,
                      controller: nameController,
                      keyboardType: TextInputType.text,
                    ),
                    const SizedBox(height: 10),
                    AutoSizeText(
                      "رقم البطاقة",
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                            color: AppTheme.blackColor,
                          ),
                    ),
                    const SizedBox(height: 5),
                    Directionality(
                      textDirection: TextDirection.ltr,
                      child: AppTextField(
                        fillColor: Color(0xFFCBCBCB),
                        isFilled: true,
                        controller: cardNumberController,
                        keyboardType: TextInputType.number,
                        isCentered: true,
                        maxCharacters: 19,
                        inputFormatters: [
                          TextField4SpaceFormatter(),
                        ],
                      ),
                    ),
                    const SizedBox(height: 10),
                    SizedBox(
                      height: 80,
                      width: double.infinity,
                      child: Row(
                        children: [
                          Expanded(
                            flex: 4,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                AutoSizeText(
                                  "انتهاء الصلاحية",
                                  style: Theme.of(context)
                                      .textTheme
                                      .bodyMedium
                                      ?.copyWith(
                                        color: AppTheme.blackColor,
                                      ),
                                ),
                                const SizedBox(height: 5),
                                Directionality(
                                  textDirection: TextDirection.ltr,
                                  child: AppTextField(
                                    fillColor: Color(0xFFCBCBCB),
                                    isFilled: true,
                                    controller: expireController,
                                    keyboardType: TextInputType.number,
                                    isCentered: true,
                                    maxCharacters: 5,
                                    inputFormatters: [
                                      TextFieldDateFormatter(),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          Expanded(
                            flex: 3,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                AutoSizeText(
                                  "رقم CVV",
                                  style: Theme.of(context)
                                      .textTheme
                                      .bodyMedium
                                      ?.copyWith(
                                        color: AppTheme.blackColor,
                                      ),
                                ),
                                const SizedBox(height: 5),
                                Directionality(
                                  textDirection: TextDirection.ltr,
                                  child: AppTextField(
                                    fillColor: Color(0xFFCBCBCB),
                                    isFilled: true,
                                    controller: cvvController,
                                    keyboardType: TextInputType.number,
                                    isCentered: true,
                                    maxCharacters: 3,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            border: Border.all(
                              color: Colors.grey,
                              width: 1,
                            ),
                          ),
                          child: Container(
                            margin: const EdgeInsets.all(6),
                            width: 12,
                            height: 12,
                            child: Checkbox(
                              value: checkBoxValue,
                              onChanged: handleCheckBoxChange,
                              checkColor: Colors.grey,
                              activeColor: Colors.grey,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(4),
                              ),
                              side: const BorderSide(
                                color: Colors.grey,
                                width: 1,
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 8,
                        ),
                        AutoSizeText(
                          "اوافق على القوانين والاحكام",
                          style:
                              Theme.of(context).textTheme.bodyMedium?.copyWith(
                                    color: AppTheme.blackColor,
                                  ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 15),
                    Row(children: [
                      Expanded(
                        child: AppButton(
                          onPressed: widget.onPaymentComplete,
                          label: "تاكيد",
                          isElevated: true,
                          color: AppTheme.yellowColor,
                        ),
                      ),
                    ]),
                  ],
                ),
              )
            ],
          ),
        ));
  }

  void handleCheckBoxChange(bool? value) {
    setState(() {
      checkBoxValue = value!;
    });
  }
}