import 'package:cims_apps/application/assets/path_assets.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/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart';
import 'package:flutter/material.dart';

class InitialRegistrationStep extends StatelessWidget {
  static const routeName = '/InitialRegistrationStep';
  const InitialRegistrationStep({Key? key}) : super(key: key);

  Widget _stepItem({
    required String description,
    bool isActive = false,
    bool isDone = false,
    bool isLast = false,
  }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 30,
              width: 30,
              decoration: BoxDecoration(
                color: isDone ? ColorPalette.primary : Colors.white,
                border: Border.all(
                    width: 2.0,
                    color: isActive || isDone
                        ? ColorPalette.primary
                        : Colors.grey),
                shape: BoxShape.circle,
              ),
              child: isDone
                  ? const Align(
                      alignment: Alignment.center,
                      child: Icon(
                        Icons.done_outlined,
                        color: Colors.white,
                      ),
                    )
                  : const SizedBox(),
            ),
            if (!isLast)
              ConstrainedBox(
                constraints: BoxConstraints.expand(
                    width: 0.0, height: SizeConfig.width * .07),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 4.0),
                  child: VerticalDivider(
                    color: isDone ? ColorPalette.primary : Colors.grey,
                    thickness: 2.0,
                  ),
                ),
              ),
          ],
        ),
        const SizedBox(
          width: 8.0,
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                height: 8.0,
              ),
              Text(
                description,
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  color:
                      isActive ? ColorPalette.primary : ColorPalette.slate800,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    List listStep = [
      {
        'desc': 'Personal Data',
        'isActive': true,
        'isDone': true,
        'isLast': false,
      },
      {
        'desc': 'Email',
        'isActive': true,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Identity Card Photo ',
        'isActive': false,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Identity Card Photo ',
        'isActive': false,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'ID Card Data Accuracy',
        'isActive': false,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Bank Data',
        'isActive': false,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Digital Signature',
        'isActive': false,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Know your Risk Profile',
        'isActive': false,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Completed Registration',
        'isActive': false,
        'isDone': false,
        'isLast': true,
      },
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Registration'),
      ),
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ImageView(
                  image: PathAssets.imgRegis,
                  width: SizeConfig.width * .4,
                ),
                SizedBox(
                  width: SizeConfig.width * .45,
                  child: const Text(
                    "It's time for your registration",
                    maxLines: 2,
                    style: TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 18,
                        color: ColorPalette.slate800),
                  ),
                )
              ],
            ),
            SizedBox(
              height: SizeConfig.height * .6,
              child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: Column(
                  children: listStep
                      .asMap()
                      .entries
                      .map((e) => _stepItem(
                            description: '${e.value['desc']}',
                            isActive: e.value['isActive'],
                            isDone: e.value['isDone'],
                            isLast: e.value['isLast'],
                          ))
                      .toList(),
                ),
              ),
            ),
            ButtonView(
              name: 'Let’s Start',
              marginVertical: 8.0,
              onPressed: () {
                routePush(context, page: const SubmissionParent());
              },
            )
          ],
        ),
      ),
    );
  }
}