import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/steps_cubit/cubit/steps_cubit.dart';
import 'package:syncrow_web/utils/color_manager.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsetsGeometry.only(left: 20),
      child: BlocBuilder<StepsCubit, StepsState>(
        builder: (context, state) {
          if (state is StepOneState) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const SizedBox(
                  height: 10,
                ),
                const CircleTitleStepperWidget(
                  title: 'Space',
                ),
                Container(
                    padding: const EdgeInsets.only(left: 3),
                    alignment: Alignment.centerLeft,
                    height: 50,
                    child: const VerticalDivider(
                      width: 8,
                    )),
                const CircleTitleStepperWidget(
                  title: 'Settings',
                  titleColor: ColorsManager.softGray,
                  circleColor: ColorsManager.whiteColors,
                  borderColor: ColorsManager.textGray,
                )
              ],
            );
          } else if (state is StepTwoState) {
            return Column(
              children: [
                const SizedBox(
                  height: 10,
                ),
                const CircleTitleStepperWidget(
                  title: 'Space',
                  titleColor: ColorsManager.softGray,
                  cicleIcon: Icon(
                    Icons.check,
                    color: ColorsManager.whiteColors,
                    size: 12,
                  ),
                  circleColor: ColorsManager.trueIconGreen,
                  radius: 15,
                  borderColor: ColorsManager.trueIconGreen,
                ),
                Container(
                    padding: const EdgeInsets.only(left: 3),
                    alignment: Alignment.centerLeft,
                    height: 50,
                    child: const VerticalDivider(
                      width: 8,
                    )),
                const CircleTitleStepperWidget(
                  title: 'Settings',
                )
              ],
            );
          } else if (state is StepEditMode) {
            return const CircleTitleStepperWidget(
              title: 'Settings',
            );
          } else {
            return const SizedBox();
          }
        },
      ),
    );
  }
}

class CircleTitleStepperWidget extends StatelessWidget {
  final double? radius;
  final Widget? cicleIcon;
  final Color? circleColor;
  final Color? borderColor;
  final Color? titleColor;
  final String title;
  const CircleTitleStepperWidget({
    super.key,
    required this.title,
    this.circleColor,
    this.borderColor,
    this.cicleIcon,
    this.titleColor,
    this.radius,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: radius ?? 15,
          height: radius ?? 15,
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: circleColor ?? ColorsManager.blue1,
              border: Border.all(color: borderColor ?? ColorsManager.blue1)),
          child: cicleIcon,
        ),
        const SizedBox(
          width: 10,
        ),
        Text(
          title,
          style: TextStyle(
            fontWeight: FontWeight.w700,
            color: titleColor ?? ColorsManager.blackColor,
          ),
        ),
      ],
    );
  }
}
