import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';

import '../../../../core/constants/app_assets.dart';
import '../../../../core/constants/translation_keys.dart';
import '../../../../custom_widgets/custom_app_bar.dart';
import '../../../../res/app_colors.dart';
import '../../controllers/payment_method_controller.dart';


class PaymentMethodView extends GetView<PaymentMethodController> {
  const PaymentMethodView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DashBoardAppBar(
        title: TranslationKeys.makeTranslation(TranslationKeys.transUtilityBillCategory),
        onBackButtonPressed: () {
          Navigator.of(context).pop();
        },
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(TranslationKeys.makeTranslation(TranslationKeys.textHowdoyouwanttopay), style: Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 16, color: AppColors.black)),
              const SizedBox(height: 30),
              Row(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      height: 30,
                      width: 30,
                      decoration: const BoxDecoration(
                        color: AppColors.colorGrey300,
                        borderRadius: BorderRadius.all(Radius.circular(50)),
                      ),
                      child: SvgPicture.asset(AppAssets.ic_debit_card),
                    ),
                  ),
                  Expanded(
                    flex: 6,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 10.0),
                      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                        Text(TranslationKeys.makeTranslation(TranslationKeys.textDebitCard), style: Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 16, color: AppColors.colorGrey900)),
                        const SizedBox(height: 5),
                        Text(TranslationKeys.makeTranslation(TranslationKeys.textDebitCardContent), style: Theme.of(context).textTheme.bodySmall),
                      ]),
                    ),
                  ),
                  //const Spacer(),
                  const Expanded(
                    flex: 2,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [Icon(Icons.arrow_forward_ios_outlined, size: 15, color: AppColors.colorGrey600)],
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 30),
              Row(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      height: 30,
                      width: 30,
                      decoration: const BoxDecoration(
                        color: AppColors.colorGrey300,
                        borderRadius: BorderRadius.all(Radius.circular(50)),
                      ),
                      child: SvgPicture.asset(AppAssets.ic_debit_card),
                    ),
                  ),
                  Expanded(
                    flex: 6,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 10.0),
                      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                        Text(TranslationKeys.makeTranslation(TranslationKeys.textCreditCard), style: Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 16, color: AppColors.colorGrey900)),
                        const SizedBox(height: 5),
                        Text(TranslationKeys.makeTranslation(TranslationKeys.textDebitCardContent), style: Theme.of(context).textTheme.bodySmall),
                      ]),
                    ),
                  ),
                  //const Spacer(),
                  const Expanded(
                    flex: 2,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [Icon(Icons.arrow_forward_ios_outlined, size: 15, color: AppColors.colorGrey600)],
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 30),
              InkWell(
                onTap: () {},
                child: Row(
                  children: [
                    Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        height: 30,
                        width: 30,
                        decoration: const BoxDecoration(
                          color: AppColors.colorGrey300,
                          borderRadius: BorderRadius.all(Radius.circular(50)),
                        ),
                        child: SvgPicture.asset(AppAssets.ic_bank_transfer),
                      ),
                    ),
                    Expanded(
                      flex: 6,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10.0),
                        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                          Text(TranslationKeys.makeTranslation(TranslationKeys.textBankTransfer), style: Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 16, color: AppColors.colorGrey900)),
                          const SizedBox(height: 5),
                          Text(TranslationKeys.makeTranslation(TranslationKeys.textDebitCardContent), style: Theme.of(context).textTheme.bodySmall),
                        ]),
                      ),
                    ),
                    //const Spacer(),
                    const Expanded(
                      flex: 2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [Icon(Icons.arrow_forward_ios_outlined, size: 15, color: AppColors.colorGrey600)],
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 40),
              Container(height: 1, width: double.infinity, color: AppColors.colorGrey350),
              const SizedBox(height: 40),
              InkWell(
                onTap: () {
                  controller.updatePaymentMethod(PaymentMethod(image: AppAssets.ic_general_ledger, title: TranslationKeys.textGeneralLedger, content: "", icon: const Icon(Icons.abc)));
                },
                child: Row(
                  children: [
                    Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        height: 30,
                        width: 30,
                        decoration: const BoxDecoration(
                          color: AppColors.colorGrey300,
                          borderRadius: BorderRadius.all(Radius.circular(50)),
                        ),
                        child: SvgPicture.asset(AppAssets.ic_general_ledger),
                      ),
                    ),
                    Expanded(
                      flex: 6,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10.0),
                        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                          Text(TranslationKeys.makeTranslation(TranslationKeys.textGeneralLedger), style: Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 16, color: AppColors.colorGrey900)),
                          const SizedBox(height: 5),
                          Text(TranslationKeys.makeTranslation(TranslationKeys.textDebitCardContent), style: Theme.of(context).textTheme.bodySmall),
                        ]),
                      ),
                    ),
                    //const Spacer(),
                    const Expanded(
                      flex: 2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [Icon(Icons.arrow_forward_ios_outlined, size: 15, color: AppColors.colorGrey600)],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
