import 'package:eatvio_app/core/theme/custom_text_style.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/features/consultations/models/consultation_progress.dart';
import 'package:eatvio_app/generated/l10n.dart';
import 'package:flutter/material.dart';

class ConsultationProgressPlank extends StatelessWidget {
  const ConsultationProgressPlank({super.key, required this.progress});

  final ConsultationProgress progress;

  static const _steps = [
    ConsultationStep.startDate,
    ConsultationStep.paid,
    ConsultationStep.inProgress,
    ConsultationStep.finished,
  ];

  @override
  Widget build(BuildContext context) {
    if (!progress.showProgressPlank) {
      return const SizedBox.shrink();
    }

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        for (var index = 0; index < _steps.length; index++)
          Expanded(
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: Container(
                        height: 2,
                        color: index == 0
                            ? Colors.transparent
                            : progress.isStepCompleted(_steps[index - 1])
                            ? appTheme.greenA700
                            : appTheme.lightGray00,
                      ),
                    ),
                    _ProgressStepCircle(
                      key: ValueKey('consultation_step_circle_$index'),
                      index: index,
                      isCompleted: progress.isStepCompleted(_steps[index]),
                    ),
                    Expanded(
                      child: Container(
                        height: 2,
                        color: index == _steps.length - 1
                            ? Colors.transparent
                            : progress.isStepCompleted(_steps[index])
                            ? appTheme.greenA700
                            : appTheme.lightGray00,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 6),
                Text(
                  _stepLabel(S.of(context), _steps[index]),
                  key: ValueKey('consultation_step_label_$index'),
                  textAlign: TextAlign.center,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyles.textFS10FW500.copyWith(
                    color: progress.isStepCompleted(_steps[index])
                        ? appTheme.black
                        : appTheme.gray,
                  ),
                ),
              ],
            ),
          ),
      ],
    );
  }

  String _stepLabel(S s, ConsultationStep step) {
    switch (step) {
      case ConsultationStep.startDate:
        return s.startDateHasBeenSet;
      case ConsultationStep.paid:
        return s.order_paid;
      case ConsultationStep.inProgress:
        return s.order_in_progress;
      case ConsultationStep.finished:
        return s.done;
    }
  }
}

class _ProgressStepCircle extends StatelessWidget {
  const _ProgressStepCircle({
    super.key,
    required this.index,
    required this.isCompleted,
  });

  final int index;
  final bool isCompleted;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24,
      height: 24,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: isCompleted ? appTheme.greenA700 : appTheme.lightGray00,
      ),
      child: isCompleted
          ? Icon(Icons.check, size: 14, color: appTheme.whiteA700)
          : Text(
              '${index + 1}',
              style: TextStyles.textFS10FW500.copyWith(color: appTheme.gray),
            ),
    );
  }
}