import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/enums.dart';
import 'package:mc_common_app/view_models/ad_view_model.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

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

  Widget buildStep(String icon, String title, bool isSelected) {
    return Column(
      children: [
        Container(
          height: 50,
          width: 50,
          padding: const EdgeInsets.all(08),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: isSelected ? MyColors.darkPrimaryColor : MyColors.white,
            border: Border.all(
              color: isSelected ? MyColors.darkPrimaryColor : MyColors.lightIconColor,
              width: 0.3,
            ),
          ),
          child: icon.buildSvg(color: isSelected ? MyColors.white : MyColors.lightIconColor).paddingAll(3),
        ),
        5.height,
        title.toText(
          textAlign: TextAlign.center,
          isBold: true,
          fontSize: 12,
          color: isSelected ? MyColors.black : MyColors.lightIconColor,
        ),
      ],
    );
  }

  bool isStepCompleted({required AdCreationSteps currentStep}) {
    return true;
  }

  int getProgressStepNumber({required AdCreationSteps currentStep}) {
    switch (currentStep) {
      case AdCreationSteps.vehicleDetails:
        return 1;
      case AdCreationSteps.damageParts:
        return 2;
      case AdCreationSteps.adDuration:
        return 3;
      case AdCreationSteps.reviewAd:
        return 4;
    }
  }

  @override
  Widget build(BuildContext context) {
    AdVM adVM = context.watch<AdVM>();
    return Stack(
      // alignment: Alignment.center,
      children: [
        const Divider(thickness: 1).paddingOnly(left: 21, right: 21, top: 15),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            buildStep(MyAssets.carIcon, ("${LocaleKeys.vehicleVar.tr()} \n${LocaleKeys.detailsVar.tr()}"), getProgressStepNumber(currentStep: adVM.currentProgressStep) >= 1),
            buildStep(MyAssets.carHitIcon, ("${LocaleKeys.damageVar.tr()} \n${LocaleKeys.partsVar.tr()}"), getProgressStepNumber(currentStep: adVM.currentProgressStep) >= 2),
            buildStep(MyAssets.clockIcon, ("${LocaleKeys.additional.tr()} \n${LocaleKeys.detailsVar.tr()}"), getProgressStepNumber(currentStep: adVM.currentProgressStep) >= 3),
            buildStep(MyAssets.reviewIcon, ("${LocaleKeys.review.tr()} \n${LocaleKeys.adVar.tr()}"), getProgressStepNumber(currentStep: adVM.currentProgressStep) >= 4),
          ],
        ),
      ],
    );
  }
}
