import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/widgets/data_display/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});

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    return !projectViewModel.isArabic? Stack(
      children: [
        Container(
          height: 50,
          width: MediaQuery.of(context).size.width,
          color: Colors.transparent,
          child: Center(
            child: Divider(
              color: Colors.grey,
              height: 0.75,
              thickness: 0.75,
            ),
          ),
        ),
        Positioned(
          top: 10,
          left: 0,
          child: InkWell(
            onTap: () => changeCurrentTab(0),
            child: Container(
              width: 35,
              height: 35,
              decoration: BoxDecoration(
                border:  index > 0 ? null:Border.all(color: Colors.black,width: 0.75),
                shape: BoxShape.circle,
                color: index == 0 ?  Colors.grey[800] : index > 0 ?Colors.green: Colors.white,
              ),
              child: Center(
                child: Texts(
                  '1',
                  color: index == 0 ? Colors.white : index > 0 ?Colors.white: Colors.grey[800],
                ),
              ),
            ),
          ),
        ),
        Positioned(
          top: 10,
          left: MediaQuery.of(context).size.width * 0.42,
          child: InkWell(
            onTap: () => index >= 2 ? changeCurrentTab(1) : null,
            child: Container(
              width: 35,
              height: 35,
              decoration: BoxDecoration(
                border:  index > 1 ? null:Border.all(color: Colors.black,width: 0.75),
                shape: BoxShape.circle,
                color: index == 1 ? Colors.grey[800] : index > 1 ?Colors.green: Colors.white,
              ),
              child: Center(
                child: Texts(
                  '2',
                  color: index == 1? Colors.white : index > 1 ?Colors.white: Colors.grey[800],
                ),
              ),
            ),
          ),
        ),
        Positioned(
          top: 10,
          right: 0,
          child: InkWell(
            onTap: () => index == 2 ?changeCurrentTab(3) : null,
            child: Container(
              width: 35,
              height: 35,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border:   Border.all(color: Colors.black,width: 0.75),
                color: index == 2 ? Colors.grey[800] : Colors.white,
              ),
              child: Center(
                child: Texts(
                  '3',
                  color: index == 2 ? Colors.white : Colors.grey[800],
                ),
              ),
            ),
          ),
        ),

      ],
    ):Stack(
      children: [
        Container(
          height: 50,
          width: MediaQuery.of(context).size.width,
          color: Colors.transparent,
          child: Center(
            child: Divider(
              color: Colors.grey,
              height: 0.75,
              thickness: 0.75,
            ),
          ),
        ),
        Positioned(
          top: 10,
          right: 0,
          child: InkWell(
            onTap: () => changeCurrentTab(0),
            child: Container(
              width: 35,
              height: 35,
              decoration: BoxDecoration(
                border:  index > 0 ? null:Border.all(color: Colors.black,width: 0.75),
                shape: BoxShape.circle,
                color: index == 0 ?  Colors.grey[800] : index > 0 ?Colors.green: Colors.white,
              ),
              child: Center(
                child: Texts(
                  '1',
                  color: index == 0 ? Colors.white : index > 0 ?Colors.white: Colors.grey[800],
                ),
              ),
            ),
          ),
        ),
        Positioned(
          top: 10,
          left: MediaQuery.of(context).size.width * 0.42,
          child: InkWell(
            onTap: () => index >= 2 ? changeCurrentTab(1) : null,
            child: Container(
              width: 35,
              height: 35,
              decoration: BoxDecoration(
                border:  index > 1 ? null:Border.all(color: Colors.black,width: 0.75),
                shape: BoxShape.circle,
                color: index == 1 ? Colors.grey[800] : index > 1 ?Colors.green: Colors.white,
              ),
              child: Center(
                child: Texts(
                  '2',
                  color: index == 1? Colors.white : index > 1 ?Colors.white: Colors.grey[800],
                ),
              ),
            ),
          ),
        ),
        Positioned(
          top: 10,
          left: 0,
          child: InkWell(
            onTap: () => index == 2 ?changeCurrentTab(3) : null,
            child: Container(
              width: 35,
              height: 35,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border:   Border.all(color: Colors.black,width: 0.75),
                color: index == 2 ? Colors.grey[800] : Colors.white,
              ),
              child: Center(
                child: Texts(
                  '3',
                  color: index == 2 ? Colors.white : Colors.grey[800],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}