import 'package:doctor_app_flutter/config/size_config.dart';
import 'package:doctor_app_flutter/util/translations_delegate_base.dart';
import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart';
import 'package:flutter/material.dart';

import '../../../../config/config.dart';

/// *
/// By Mousa Zaid Mousa Abuzaid
/// At 13/4/2021

/*
  All hex value from 100% to 0% alpha: used in line 122
  https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
   */

class PageStepperWidget extends StatelessWidget {
  final int stepsCount;
  final int currentStepIndex;
  final Size screenSize;
  final List<String> stepsTitles;

  PageStepperWidget(
      {this.stepsCount,
      this.currentStepIndex,
      this.screenSize,
      this.stepsTitles});

  @override
  Widget build(BuildContext context) {
    double dividerWidth = (screenSize.width / stepsCount) - (10 * stepsCount);

    return Container(
      margin: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              for (int i = 1; i <= stepsCount; i++)
                if (i == currentStepIndex)
                  StepWidget(
                    i,
                    true,
                    i == stepsCount,
                    i < currentStepIndex,
                    dividerWidth,
                    stepsTitles: stepsTitles,
                  )
                else
                  StepWidget(
                    i,
                    false,
                    i == stepsCount,
                    i < currentStepIndex,
                    dividerWidth,
                    stepsTitles: stepsTitles,
                  )
            ],
          )
        ],
      ),
    );
  }
}

class StepWidget extends StatelessWidget {
  final int index;
  final bool isInProgress;
  final bool isFinalStep;
  final bool isStepFinish;
  final double dividerWidth;
  final List<String> stepsTitles;

  StepWidget(this.index, this.isInProgress, this.isFinalStep, this.isStepFinish,
      this.dividerWidth,
      {this.stepsTitles});

  @override
  Widget build(BuildContext context) {
    StepStatus status;
    if (isInProgress) {
      status = StepStatus.InProgress;
    } else {
      if (isStepFinish) {
        status = StepStatus.Completed;
      } else {
        status = StepStatus.Locked;
      }
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Container(
              padding: EdgeInsets.all(0.0),
              margin: EdgeInsets.symmetric(horizontal: 1),
              width: 30,
              height: 30,
              decoration: BoxDecoration(
                color: status == StepStatus.InProgress
                    ? Color(0xFFCC9B14)
                    : status == StepStatus.Locked
                        ? Color(0xFFE3E3E3)
                        : AppGlobal.appGreenColor,
                shape: BoxShape.circle,
                border: Border.all(
                    color: status == StepStatus.InProgress
                        ? Color(0xFFCC9B14)
                        : status == StepStatus.Locked
                            ? Color(0xFFE3E3E3)
                            : AppGlobal.appGreenColor,
                    width: 1),
              ),
              child: Center(
                  child: Icon(
                Icons.check,
                size: 20,
                color: status == StepStatus.Locked
                    ? Color(0xFF969696)
                    : Colors.white,
              )),
            ),
            if (!isFinalStep)
              Container(
                margin: EdgeInsets.symmetric(horizontal: 4),
                width: dividerWidth,
                height: 2,
                color: status == StepStatus.Completed
                    ? AppGlobal.appGreenColor
                    : Color(0xFFCCCCCC),
              ),
          ],
        ),
        SizedBox(
          height: 8,
        ),
        AppText(
          stepsTitles == null
              ? "${TranslationBase.of(context).step} $index"
              : "${stepsTitles[index - 1]}",
          fontWeight: FontWeight.bold,
          color: status == StepStatus.Locked ? Color(0xFF969696) : Colors.black,
          fontFamily: 'Poppins',
          fontSize: SizeConfig.textMultiplier * 1.6,
        ),
        Container(
          margin: EdgeInsets.symmetric(vertical: 4),
          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
          decoration: BoxDecoration(
            color: status == StepStatus.InProgress
                ? Color(0xFFF1E9D3)
                : status == StepStatus.Locked
                    ? Color(0x29797979)
                    : Color(0xFFD8E8D8),
            borderRadius: BorderRadius.all(
              Radius.circular(4.0),
            ),
            border: Border.all(
                color: status == StepStatus.InProgress
                    ? Color(0xFFF1E9D3)
                    : status == StepStatus.Locked
                        ? Color(0x29797979)
                        : Color(0xFFD8E8D8),
                width: 0.30),
          ),
          child: AppText(
            status == StepStatus.InProgress
                ? "inProgress"
                : status == StepStatus.Locked
                    ? "Locked"
                    : "Completed",
            fontWeight: FontWeight.bold,
            textAlign: TextAlign.center,
            fontFamily: 'Poppins',
            fontSize: SizeConfig.textMultiplier * 1.4,
            color: status == StepStatus.InProgress
                ? Color(0xFFCC9B14)
                : status == StepStatus.Locked
                    ? Color(0xFF969696)
                    : AppGlobal.appGreenColor,
          ),
        )
      ],
    );
  }
}

enum StepStatus {
  InProgress,
  Locked,
  Completed,
}