import 'package:doctor_app_flutter/core/viewModel/project_view_model.dart';
import 'package:doctor_app_flutter/widgets/shared/Text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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: 120,
                width: MediaQuery.of(context).size.width,
                color: Colors.transparent,
                child: Center(
                  child: Divider(
                    color: Colors.grey,
                    height: 0.75,
                    thickness: 0.75,
                  ),
                ),
              ),
              Positioned(
                top: index == 0 ? 15 : 30,
                left: 0,
                child: InkWell(
                  onTap: () => changeCurrentTab(0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 0 ? 70 : 50,
                        height: index == 0 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 0
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 0
                                  ? null
                                  : Border.all(
                                      color: Colors.black, width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 0
                              ? Colors.white
                              : index > 0
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '1',
                            variant: index == 0 ? "heading2" : "",
                            bold: true,
                            color: index == 0
                                ? Colors.black
                                : index > 0
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 0 ? 5 : 10,
                      ),
                      Texts('SUBJECTIVE',
                          variant: "bodyText",
                          bold: true,
                          color: Colors.black),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: index == 1 ? 15 : 30,
                left: MediaQuery.of(context).size.width * 0.28,
                child: InkWell(
                  onTap: () => index >= 2 ? changeCurrentTab(1) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 1 ? 70 : 50,
                        height: index == 1 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 1
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 1
                              ? Colors.white
                              : index > 1
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '2',
                            variant: index == 1 ? "heading2" : '',
                            bold: true,
                            color: index == 1
                                ? Colors.black
                                : index > 1
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 1 ? 5 : 10,
                      ),
                      Texts('OBJECTIVE',
                          variant: "bodyText",
                          bold: true,
                          color: Colors.black),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: index == 2 ? 15 : 30,
                left: MediaQuery.of(context).size.width * 0.52,
                child: InkWell(
                  onTap: () => index >= 2 ? changeCurrentTab(3) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 2 ? 70 : 50,
                        height: index == 2 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 2
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 2
                              ? Colors.white
                              : index > 2
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '3',
                            variant: index == 2 ? "heading2" : '',
                            bold: true,
                            color: index == 2
                                ? Colors.black
                                : index > 2
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 2 ? 5 : 10,
                      ),
                      Texts('ASSESSMENT',
                          variant: "bodyText",
                          bold: true,
                          color: Colors.black),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: index == 3 ? 15 : 30,
                right: 0,
                child: InkWell(
                  onTap: () => index >= 3 ? changeCurrentTab(4) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 3 ? 70 : 50,
                        height: index == 3 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 3
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 3
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 3
                              ? Colors.white
                              : index > 3
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '4',
                            variant: index == 3 ? "heading2" : '',
                            bold: true,
                            color: index == 3
                                ? Colors.black
                                : index > 3
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 3 ? 5 : 10,
                      ),
                      Texts('PLAN',
                          variant: "bodyText",
                          bold: true,
                          color: Colors.black),
                    ],
                  ),
                ),
              ),
            ],
          )
        : Stack(
            children: [
              Container(
                height: 120,
                width: MediaQuery.of(context).size.width,
                color: Colors.transparent,
                child: Center(
                  child: Divider(
                    color: Colors.grey,
                    height: 0.75,
                    thickness: 0.75,
                  ),
                ),
              ),
              Positioned(
                top: index == 0 ? 15 : 30,
                right: 0,
                child: InkWell(
                  onTap: () => changeCurrentTab(0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 0 ? 70 : 50,
                        height: index == 0 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 0
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 0
                                  ? null
                                  : Border.all(
                                      color: Colors.black, width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 0
                              ? Colors.white
                              : index > 0
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '1',
                            variant: index == 0 ? "heading2" : "",
                            bold: true,
                            color: index == 0
                                ? Colors.black
                                : index > 0
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 0 ? 5 : 10,
                      ),
                      Texts('SUBJECTIVE',
                          variant: "bodyText",
                          bold: true,
                          color: Colors.black),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: index == 1 ? 15 : 30,
                right: MediaQuery.of(context).size.width * 0.28,
                child: InkWell(
                  onTap: () => index >= 2 ? changeCurrentTab(1) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 1 ? 70 : 50,
                        height: index == 1 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 1
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 1
                              ? Colors.white
                              : index > 1
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '2',
                            variant: index == 1 ? "heading2" : '',
                            bold: true,
                            color: index == 1
                                ? Colors.black
                                : index > 1
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 1 ? 5 : 10,
                      ),
                      Texts('OBJECTIVE',
                          variant: "bodyText",
                          bold: true,
                          color: Colors.black),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: index == 2 ? 15 : 30,
                right: MediaQuery.of(context).size.width * 0.52,
                child: InkWell(
                  onTap: () => index >= 2 ? changeCurrentTab(3) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 2 ? 70 : 50,
                        height: index == 2 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 2
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 2
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 2
                              ? Colors.white
                              : index > 2
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '3',
                            variant: index == 2 ? "heading2" : '',
                            bold: true,
                            color: index == 2
                                ? Colors.black
                                : index > 2
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 2 ? 5 : 10,
                      ),
                      Padding(

                        padding: const EdgeInsets.only(right: 2),
                        child: Texts('ASSESSMENT',
                            variant: "bodyText",
                            bold: true,
                            color: Colors.black),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                top: index == 3 ? 15 : 30,
                left: 0,
                child: InkWell(
                  onTap: () => index >= 3 ? changeCurrentTab(4) : null,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: index == 3 ? 70 : 50,
                        height: index == 3 ? 70 : 50,
                        decoration: BoxDecoration(
                          border: index == 3
                              ? Border.all(color: Color(0xFFB9382C), width: 2)
                              : index > 3
                                  ? null
                                  : Border.all(
                                      color: Color(0xFFCCCCCC), width: 0.75),
                          shape: BoxShape.circle,
                          color: index == 3
                              ? Colors.white
                              : index > 3
                                  ? Color(0xFFB9382C)
                                  : Color(0xFFCCCCCC),
                        ),
                        child: Center(
                          child: Texts(
                            '4',
                            variant: index == 3 ? "heading2" : '',
                            bold: true,
                            color: index == 3
                                ? Colors.black
                                : index > 3
                                    ? Colors.white
                                    : Colors.grey,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: index == 3 ? 5 : 10,
                      ),
                      Texts('PLAN',
                          variant: "bodyText",
                          bold: true,
                          color: Colors.black),
                    ],
                  ),
                ),
              ),
            ],
          );
  }
}