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;

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

  //  TODO : Add translation to name
  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    return !projectViewModel.isArabic
        ? Stack(
            children: [
              Container(
                height: 150,
                width: MediaQuery.of(context).size.width,
                color: Colors.transparent,
                child: Center(
                  child: Divider(
                    color: Colors.grey,
                    height: 0.75,
                    thickness: 0.75,
                  ),
                ),
              ),
              Positioned(
                top: 50,
                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: 50,
                left: MediaQuery
                    .of(context)
                    .size
                    .width * 0.28,
                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: 50,
                left: MediaQuery
                    .of(context)
                    .size
                    .width * 0.52,
                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(0xFFCC9B14)
                              : 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: 50,
                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,
                      ),
                     Center(
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.end,
                         children: [
                           AppText(
                             "Plan",
                             fontWeight: FontWeight.bold,
                             textAlign: TextAlign.center,
                             fontSize: 12,
                           ),
                           StatusLabel(selectedStepId: index, stepId: 3,),
                         ],
                       ),
                     ),
                    ],
                  ),
                ),
              ),
            ],
          )
        : Stack(
            children: [
              Container(
                height: 150,
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                color: Colors.transparent,
                child: Center(
                  child: Divider(
                    color: Colors.grey,
                    height: 0.75,
                    thickness: 0.75,
                  ),
                ),
              ),
              Positioned(
                top: 50,
                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
                      ),
                      AppText(
                        "شخصي",
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 50,
                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
                      ),
                      AppText(
                        "هدف",
                        fontWeight: FontWeight.bold,
                        fontSize:14,
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 50,
                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: AppText(
                        "تقدير",
                        fontWeight: FontWeight.bold,
                        fontSize:14,
                      ),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 50,
                left: 0,
                child: InkWell(
                  onTap: () => index >= 3 ? changeCurrentTab(4) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    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: AppText(
                          "خطة",
                          fontWeight: FontWeight.bold,
                          fontSize:14,
                       ),
                     ),
                    ],
                  ),
                ),
              ),
            ],
    );
  }
}

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),
      ),
    );
  }
}