import 'package:doctor_app_flutter/core/viewModel/project_view_model.dart';
import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:provider/provider.dart';

class StepsWidget extends StatelessWidget {
  final int index;
  final Function changeCurrentTab;
  final double height;

  StepsWidget({Key key, this.index, this.changeCurrentTab, this.height = 0.0});

  //  TODO : Add translation to name
  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    return !projectViewModel.isArabic
        ? Stack(
            children: [
              Container(
                height: height == 0 ? 150 : height,
                width: MediaQuery.of(context).size.width * 0.9,
                color: Colors.transparent,
                child: Center(
                  child: Container(
                    width: MediaQuery.of(context).size.width * 0.87,
                    child: Divider(
                      color: Colors.grey,
                      height: 0.75,
                      thickness: 0.75,
                    ),
                  ),
                ),
              ),
              Positioned(
                top: 43,
                left: 0,
                child: InkWell(
                  onTap: () => changeCurrentTab(0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 0
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 0
                                  ? null
                                  : Border.all(
                                      color: Colors.black, width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 0
                              ? Color(0xFFCC9B14)
                              : index > 0
                                  ? Color(0xFF359846)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                          FontAwesomeIcons.check,
                          size: 20,
                          color: Colors.white,
                        )),
                      ),
                      SizedBox(height: 5),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          AppText(
                            "Subjective",
                            fontWeight: FontWeight.bold,
                            fontSize: 12,
                          ),
                          StatusLabel(
                            selectedStepId: index,
                            stepId: 0,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 43,
                left: MediaQuery
                    .of(context)
                    .size
                    .width * 0.25,
                child: InkWell(
                  onTap: () => index >= 1 ? changeCurrentTab(1) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 1
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 1
                              ? Color(0xFFCC9B14)
                              : index > 1
                                  ? Color(0xFF359846)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                          FontAwesomeIcons.check,
                          size: 20,
                          color: Colors.white,
                        )),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          AppText(
                            "Objective",
                            fontWeight: FontWeight.bold,
                            fontSize: 12,
                          ),
                          StatusLabel(
                            selectedStepId: index,
                            stepId: 1,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 43,
                left: MediaQuery
                    .of(context)
                    .size
                    .width * 0.50,
                child: InkWell(
                  onTap: () {
                    if (index >= 3) changeCurrentTab(2);
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 2
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 2
                              ? Color(0xFFCC9B14)
                              : index > 2
                                  ? Color(0xFF359846)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                          FontAwesomeIcons.check,
                          size: 20,
                          color: Colors.white,
                        )),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          AppText(
                            "Assessment",
                            fontWeight: FontWeight.bold,
                            fontSize: 12,
                          ),
                          StatusLabel(
                            selectedStepId: index,
                            stepId: 2,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 43,
                right: 0,
                child: InkWell(
                  onTap: () => index >= 3 ? changeCurrentTab(4) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 3
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 3
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 3
                              ? Color(0xFFCC9B14)
                              : index > 3
                                  ? Color(0xFF359846)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                              FontAwesomeIcons.check,
                              size: 20,
                              color: Colors.white,
                            )),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          AppText(
                            "Plan",
                            fontWeight: FontWeight.bold,
                            // textAlign: TextAlign.center,
                            fontSize: 12,
                          ),
                          StatusLabel(
                            selectedStepId: index,
                            stepId: 3,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          )
        : Stack(
            children: [
              Container(
                height: height == 0 ? 150 : height,
                width: MediaQuery.of(context).size.width,
                color: Colors.transparent,
                child: Center(
                  child: Divider(
                    color: Colors.grey,
                    height: 0.75,
                    thickness: 0.75,
                  ),
                ),
              ),
              Positioned(
                top: 43,
                right: 0,
                child: InkWell(
                  onTap: () => changeCurrentTab(0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 0
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 0
                                  ? null
                                  : Border.all(
                                      color: Colors.black, width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 0
                              ? Color(0xFFCC9B14)
                              : index > 0
                                  ? Color(0xFF359846)
                              : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                              FontAwesomeIcons.check,
                              size: 20,
                              color: Colors.white,
                            )),
                      ),
                      SizedBox(height: 5),
                      Column(
                        children: [
                          AppText(
                            "شخصي",
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                          StatusLabel(
                            selectedStepId: index,
                            stepId: 0,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 43,
                right: MediaQuery
                    .of(context)
                    .size
                    .width * 0.28,
                child: InkWell(
                  onTap: () => index >= 2 ? changeCurrentTab(1) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 1
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 1
                              ? Color(0xFFCC9B14)
                              : index > 1
                                  ? Color(0xFF359846)
                              : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                              FontAwesomeIcons.check,
                              size: 20,
                              color: Colors.white,
                            )),
                      ),
                      SizedBox(height: 5),
                      Column(
                        children: [
                          AppText(
                            "هدف",
                            fontWeight: FontWeight.bold,
                            fontSize: 14,
                          ),
                          StatusLabel(
                            selectedStepId: index,
                            stepId: 1,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 43,
                right: MediaQuery
                    .of(context)
                    .size
                    .width * 0.52,
                child: InkWell(
                  onTap: () => index >= 3 ? changeCurrentTab(2) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 2
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 2
                              ? Color(0xFFCC9B14)
                              : index > 2
                                  ? Color(0xFFCC9B14)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                          FontAwesomeIcons.check,
                          size: 20,
                          color: Colors.white,
                        )),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Padding(
                        padding: const EdgeInsets.only(right: 2),
                        child: Column(
                          children: [
                            AppText(
                              "تقدير",
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                            ),
                            StatusLabel(
                              selectedStepId: index,
                              stepId: 2,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 43,
                left: 0,
                child: InkWell(
                  onTap: () => index >= 3 ? changeCurrentTab(4) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Container(
                        width: 38,
                        height: 38,
                        decoration: BoxDecoration(
                          border: index == 3
                              ? Border.all(color: Color(0xFFCC9B14), width: 2)
                              : index > 3
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 3
                              ? Color(0xFFCC9B14)
                              : index > 3
                                  ? Color(0xFFCC9B14)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                            child: Icon(
                          FontAwesomeIcons.check,
                          size: 20,
                          color: Colors.white,
                        )),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Container(
                        margin: EdgeInsets.only(right: index == 3 ? 15 : 0),
                        child: Column(
                          children: [
                            AppText(
                              "خطة",
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                            ),
                            StatusLabel(
                              selectedStepId: index,
                              stepId: 3,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
  }
}

class StatusLabel extends StatelessWidget {
  const StatusLabel({
    Key key,
    this.stepId,
    this.selectedStepId,
  }) : super(key: key);

  final int stepId;
  final int selectedStepId;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 65,
      padding: EdgeInsets.symmetric(horizontal: 2, vertical: 3),
      decoration: BoxDecoration(
        color: stepId == selectedStepId
            ? Color(0xFFF1E9D3)
            : stepId < selectedStepId
                ? Color(0xFFD8E8DB)
                : Color(0xFFCCCCCC),
        borderRadius: BorderRadius.all(
          Radius.circular(5.0),
        ),
        border: Border.all(color: HexColor('#707070'), width: 0.30),
      ),
      child: AppText(
        stepId == selectedStepId
            ? "inProgress"
            : stepId < selectedStepId
                ? "Completed"
                : "   Locked   ",
        fontWeight: FontWeight.bold,
        textAlign: TextAlign.center,
        fontSize: 10,
        color: stepId == selectedStepId
            ? Color(0xFFCC9B14)
            : stepId < selectedStepId
                ? Color(0xFF359846)
                : Color(0xFF969696),
      ),
    );
  }
}