import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/theme/colors.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/uitl/utils_new.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) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.only(left: 12, right: 12, bottom: 12),
      child: Row(
        children: [
          Expanded(
            child: showProgress(
              title: TranslationBase.of(context).transportation,
              status: index == 0
                  ? TranslationBase.of(context).inPrgress
                  : index > 0
                      ? TranslationBase.of(context).completed
                      : TranslationBase.of(context).locked,
              color: index == 0 ? CustomColors.orange : CustomColors.green,
            ),
          ),
          Expanded(
            child: showProgress(
              title: TranslationBase.of(context).locationa,
              status: index == 1
                  ? TranslationBase.of(context).inPrgress
                  : index > 1
                  ? TranslationBase.of(context).completed
                  : TranslationBase.of(context).locked,
              color: index == 1
                  ? CustomColors.orange
                  : index > 1
                  ? CustomColors.green
                  : CustomColors.grey2,
            ),
          ),
          Expanded(
            child: showProgress(
              title: TranslationBase.of(context).otherInfo,
              status: index == 2
                  ? TranslationBase.of(context).inPrgress
                  : index > 2
                      ? TranslationBase.of(context).completed
                      : TranslationBase.of(context).locked,
              color: index == 2
                  ? CustomColors.orange
                  : index > 2
                      ? CustomColors.green
                      : CustomColors.grey2,
            ),
          ),
          showProgress(
            title: TranslationBase.of(context).RRTSummary,
            status: index == 3 ? TranslationBase.of(context).inPrgress : TranslationBase.of(context).locked,
            color: index == 3
                ? CustomColors.orange
                : index > 4
                    ? CustomColors.green
                    : CustomColors.grey2,
            isNeedBorder: false,
          ),
        ],
      ),
    );

    // 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,
    //       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,
    //       right: MediaQuery.of(context).size.width * 0.3,
    //       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: MediaQuery.of(context).size.width * 0.6,
    //       child: InkWell(
    //         onTap: () => index >= 3 ? changeCurrentTab(2) : null,
    //         child: Container(
    //           width: 35,
    //           height: 35,
    //           decoration: BoxDecoration(
    //             shape: BoxShape.circle,
    //             border:  index > 2 ? null:Border.all(color: Colors.black,width: 0.75),
    //             color: index == 2 ? Colors.grey[800] : index > 1 ?Colors.green: Colors.white,
    //           ),
    //           child: Center(
    //             child: Texts(
    //               '3',
    //               color: index == 2? 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(
    //             border: Border.all(color: Colors.black,width: 0.75),
    //
    //             shape: BoxShape.circle,
    //             color: index == 3 ? Colors.grey[800] : Colors.white,
    //           ),
    //           child: Center(
    //             child: Texts(
    //               '4',
    //               color: index == 3 ? 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,
    //       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.3,
    //       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: MediaQuery.of(context).size.width * 0.6,
    //       child: InkWell(
    //         onTap: () => index >= 3 ? changeCurrentTab(2) : null,
    //         child: Container(
    //           width: 35,
    //           height: 35,
    //           decoration: BoxDecoration(
    //             shape: BoxShape.circle,
    //             border:  index > 2 ? null:Border.all(color: Colors.black,width: 0.75),
    //             color: index == 2 ? Colors.grey[800] : index > 1 ?Colors.green: Colors.white,
    //           ),
    //           child: Center(
    //             child: Texts(
    //               '3',
    //               color: index == 2? 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(
    //             border: Border.all(color: Colors.black,width: 0.75),
    //
    //             shape: BoxShape.circle,
    //             color: index == 3 ? Colors.grey[800] : Colors.white,
    //           ),
    //           child: Center(
    //             child: Texts(
    //               '4',
    //               color: index == 3 ? Colors.white : Colors.grey[800],
    //             ),
    //           ),
    //         ),
    //       ),
    //     ),
    //   ],
    // );
  }

  Widget showProgress({String title, String status, Color color, bool isNeedBorder = true}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  width: 26,
                  height: 26,
                  decoration: containerRadius(color, 200),
                  child: Icon(
                    Icons.done,
                    color: Colors.white,
                    size: 16,
                  ),
                ),
                if (isNeedBorder)
                  Expanded(
                      child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: mDivider(Colors.grey),
                  )),
              ],
            ),
            mHeight(8),
            Text(
              title,
              style: TextStyle(
                fontSize: 11,
                fontWeight: FontWeight.w600,
                letterSpacing: -0.44,
              ),
            ),
            mHeight(2),
            Container(
              padding: EdgeInsets.all(5),
              decoration: containerRadius(color.withOpacity(0.2), 4),
              child: Text(
                status,
                style: TextStyle(
                  fontSize: 8,
                  fontWeight: FontWeight.w600,
                  letterSpacing: -0.32,
                  color: color,
                ),
              ),
            ),
          ],
        )
      ],
    );
  }
}
