import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.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_color.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

import '../bloc/pin_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Gap(20),
        BlocConsumer<PinBloc, PinState>(
          listener: (context, state) {
            if (state.pinComplete && state.isVerified) {
              // successToastMessage(context, "Pin verified successfully");
              goRouter.goNamed(RouteName.mainScreen);
            }
          },
          builder: (context, state) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(6, (index) {
                return Container(
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  width: 32,
                  height: 32,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                        color: state.error.isNotEmpty
                            ? AppColor.txtErrorColor
                            : index < state.pin.length
                                ? AppColor.pinFillBorderColor
                                : AppColor.pinInActiveBorderColor),
                    color: index < state.pin.length
                        ? AppColor.pinFillColor
                        : Colors.transparent,
                  ),
                );
              }),
            );
          },
        ),
        BlocBuilder<PinBloc, PinState>(
          builder: (context, state) {
            if (state.error.isNotEmpty) {
              return Container(
                margin: const EdgeInsets.only(top: 5),
                child: TextWidget()
                    .text14W500(state.error, clr: AppColor.txtErrorColor),
              );
            }
            return const SizedBox.shrink();
          },
        ),
        const Gap(20),
        GridView.builder(
          shrinkWrap: true,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.3,
          ),
          itemCount: 12,
          itemBuilder: (context, index) {
            if (index == 9) {
              return const SizedBox.shrink();
            } else if (index == 11) {
              return GestureDetector(
                onTap: () {
                  context.read<PinBloc>().add(BackspacePressed());
                },
                child: Container(
                  margin: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.black12),
                  ),
                  child: const Icon(
                    Icons.arrow_back_rounded,
                  ),
                ),
              );
            } else {
              final number = index == 10 ? '0' : '${index + 1}';
              return GestureDetector(
                onTap: () {
                  context.read<PinBloc>().add(NumberPressed(number));
                },
                child: Container(
                  margin: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.black12),
                  ),
                  child: Center(
                      child: TextWidget().text20W700(
                    number,
                    clr: AppColor.plainBlack,
                  )),
                ),
              );
            }
          },
        ),
      ],
    );
  }
}
