import 'package:dotted_line/dotted_line.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/Globalconst.dart';
import 'package:tanami_app/core/routes/route_name.dart';
import 'package:tanami_app/core/routes/routes.dart';
import 'package:tanami_app/core/styles/app_images.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

import '../../../../../../core/styles/app_color.dart';
import '../../../../../../core/styles/app_text.dart';
import '../../../../../../core/utils/language/localizations_delegate.dart';
import '../../../../../../shared/components/button_widget.dart';

class DepositStepScreen extends StatelessWidget {
  const DepositStepScreen({super.key});

  @override
  Widget build(BuildContext context) {
    var localizations = AppLocalizations.of(context);

    return Scaffold(
      backgroundColor: Colors.white,
      bottomNavigationBar: Container(
        margin: const EdgeInsets.symmetric(
          horizontal: 16,
          vertical: 16,
        ),
        width: 1.sw,
        height: 56.h,
        child: ButtonWidget().elevatedBtn(
          txtClr: AppColor.plainWhite,
          function: () {
            goRouter.pushNamed(RouteName.depositScreen);
          },
          text: localizations.translate(AppText.next),
          clr: AppColor.primaryColor2,
        ),
      ),
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        scrolledUnderElevation: 0.0,
        centerTitle: true,
        title: Text(
          localizations.translate(AppText.bankTransfer),
          style: GoogleFonts.dmSans(
            color: const Color(0xFF272727),
            fontSize: 20.sp,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextWidget().text14W500(
                localizations
                    .translate(AppText.inOrderForYouToCompleteBankTransfers),
                clr: AppColor.textLabelColor,
                txtAlign: TextAlign.start),
            const Gap(16),
            TextWidget().text15W700(
                localizations.translate(AppText.pleaseCompleteTheBelowSteps),
                clr: AppColor.plainBlack),
            const Gap(16),
            Stack(
              children: [
                Positioned(
                  left: Globalconst.languageSelected == "en" ? 35.w : 0.w,
                  right: Globalconst.languageSelected == "en" ? 0.w : 35.w,
                  top: 40.h,
                  child: DottedLine(
                    direction: Axis.vertical,
                    alignment: WrapAlignment.center,
                    lineLength: 150,
                    lineThickness: 1.0,
                    dashLength: 4.0,
                    dashColor: const Color(0xFF066123).withOpacity(0.46),
                    dashRadius: 0.0,
                    dashGapLength: 4.0,
                    dashGapRadius: 0.0,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: ListView(
                    shrinkWrap: true,
                    children: [
                      Row(
                        children: [
                          SvgPicture.asset(AppImages.dStep1Icon),
                          const Gap(16),
                          Expanded(
                            child: TextWidget().text14W400(
                              localizations.translate(AppText
                                  .insertTheAmountYouWouldLikeToTransfer),
                              clr: const Color(0xFF363636),
                              txtAlign: TextAlign.start,
                            ),
                          )
                        ],
                      ),
                      const Gap(24),
                      Row(
                        children: [
                          SvgPicture.asset(AppImages.dStep2Icon),
                          const Gap(16),
                          Expanded(
                            child: TextWidget().text14W400(
                              localizations.translate(AppText
                                  .copyTheBankDetailsYourTanamiAccountShownNextPage),
                              clr: const Color(0xFF363636),
                              txtAlign: TextAlign.start,
                            ),
                          )
                        ],
                      ),
                      const Gap(24),
                      Row(
                        children: [
                          SvgPicture.asset(AppImages.dStep3Icon),
                          const Gap(16),
                          Expanded(
                            child: TextWidget().text14W400(
                              localizations.translate(AppText
                                  .insertTheAmountYouWouldLikeToTransfer),
                              clr: const Color(0xFF363636),
                              txtAlign: TextAlign.start,
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const Gap(36),
            TextWidget().text13W500(
                localizations
                    .translate(AppText.tanamiWillNotifyUponReceiptFunds),
                clr: AppColor.plainBlack,
                fontStyle: FontStyle.italic),
          ],
        ),
      ),
    );
  }
}
