import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_header.dart';
import 'package:steps_indicator/steps_indicator.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            const MarathonHeader(),
            21.height,
            const MarathonProgressContainer().paddingOnly(left: 21, right: 21),
          ],
        ),
      ),
    );
  }
}

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

  final int totalQuestions = 24;
  final int currentQuestion = 20;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  color: MyColors.greenColor,
                  borderRadius: BorderRadius.circular(12),
                ),
                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
                child: Flexible(
                  child:
                      "${currentQuestion.toString()} / ${totalQuestions.toString()}  ${LocaleKeys.question.tr()}"
                          .toText12(color: MyColors.white),
                ),
              ),
              Flexible(
                child: "23 ${LocaleKeys.marathoners.tr()}".toText14(),
              ),
              Flexible(
                child: "00:23".toText16(isBold: true),
              ),
            ],
          ),
         15.height,
         const SizedBox(
           width: double.infinity,
           child: StepsIndicator(
             nbSteps: 7,
             selectedStep: 2,
             doneLineColor: MyColors.greenColor,
             doneStepColor: MyColors.greenColor,
             doneLineThickness: 5,
             undoneLineThickness: 5,
             selectedStepSize: 10,
             selectedStepColorIn: MyColors.greenColor,
             selectedStepColorOut: MyColors.greenColor,
             unselectedStepColorIn: MyColors.lightGreyDeColor,
             unselectedStepColorOut: MyColors.lightGreyDeColor,
             undoneLineColor: MyColors.lightGreyDeColor,
             enableLineAnimation: true,
             enableStepAnimation: true,
           ),
         ),
        ],
      ),
    );
  }
}