import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/back_button_view.dart';
import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:flutter/material.dart';

class GuideScreen extends StatelessWidget {
  const GuideScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List listImg = [
      {
        'urlImg': PathAssets.imgGuide1,
        'title': 'Passbook',
        'subtitle': 'Look in your passbook for the account number'
      },
      {
        'urlImg': PathAssets.imgGuide2,
        'title': 'Mobile Banking App',
        'subtitle':
            'Open the mobile banking app and you will find your account number'
      },
    ];

    listGuide() {
      return Column(
        children: listImg.map((e) {
          return Container(
              width: SizeConfig.width,
              height: SizeConfig.height * .18,
              padding: const EdgeInsets.all(16.0),
              margin: const EdgeInsets.symmetric(vertical: 8.0),
              decoration: BoxDecoration(
                color: ColorPalette.white,
                borderRadius: BorderRadius.circular(12),
                border: Border.all(
                  color: ColorPalette.slate400,
                  width: 2,
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 8.0),
                    child: ImageView(
                      image: e['urlImg'],
                      width: SizeConfig.width * .4,
                      fit: BoxFit.fill,
                      borderRadius: 8,
                    ),
                  ),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text(
                          e['title'],
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                            color: ColorPalette.slate800,
                          ),
                        ),
                        Text(
                          e['subtitle'],
                          style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                            color: ColorPalette.slate500,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ));
        }).toList(),
      );
    }

    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 70,
        backgroundColor: Colors.white,
        surfaceTintColor: Colors.white,
        automaticallyImplyLeading: false,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const BackButtonView(),
            const Text('Guide'),
            SizedBox(
              width: SizeConfig.width * 0.1,
            )
          ],
        ),
        shape: const RoundedRectangleBorder(
            side: BorderSide(color: ColorPalette.slate200)),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            const ImageView(image: PathAssets.imgGuideBank),
            const TextCaption(
                textAlign: TextAlign.center,
                title: 'Guide to knowing your account number'),
            listGuide(),
            ButtonView(
              name: 'close',
              isOutlined: true,
              onPressed: () => Navigator.pop(context),
            )
          ],
        ),
      ),
    );
  }
}
