import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:gascom/constants/app_theme.dart';
import 'package:gascom/screens/face_detection_screen.dart';
import 'package:gascom/screens/payment_screen.dart';
import 'package:gascom/widgets/app_button.dart';
import 'package:gascom/widgets/custom_app_bar.dart';
import 'package:persistent_bottom_nav_bar_v2/persistent_bottom_nav_bar_v2.dart';

class OrderDetailsScreen extends StatefulWidget {
  const OrderDetailsScreen({super.key});

  @override
  State<OrderDetailsScreen> createState() => _OrderDetailsScreenState();
}

class _OrderDetailsScreenState extends State<OrderDetailsScreen> {

  int activeStep = 3;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        title: "رقم الطلب: 67895435",
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        children: [
          const SizedBox(height: 20),
          AutoSizeText(
            "حالة الطلب",
            minFontSize: 10,
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          const SizedBox(height: 10),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(width: 15),
              activeStep > 0 ? const Padding(
                padding: EdgeInsets.symmetric(horizontal: 6),
                child: Icon(
                  Icons.check_rounded,
                  size: 26,
                  color: AppTheme.yellowColor,
                ),
              ) : const SizedBox(width: 40,),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AutoSizeText(
                      "مراجعة الطلب من قبل لجنة الطاقة",
                      minFontSize: 10,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: activeStep == 0
                        ? AppTheme.textColor
                        : activeStep > 0
                        ? AppTheme.yellowColor
                        : AppTheme.textColor.withOpacity(0.6)
                      ),
                    ),
                    if (activeStep > 0) ...[
                      const SizedBox(height: 5),
                      AutoSizeText(
                        "2024/02/06",
                        minFontSize: 10,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: AppTheme.yellowColor,
                        ),
                      ),
                    ]
                  ],
                ),
              ),
            ]
          ),
          const SizedBox(height: 5),
          SizedBox(
            height: 40,
            child: Row(
              children: [
                const SizedBox(width: 40),
                VerticalDivider(
                  color: activeStep > 0 ? AppTheme.textColor  : AppTheme.textColor.withOpacity(0.6),
                  thickness: 1,
                  width: 20,
                ),
              ],
            ),
          ),
          const SizedBox(height: 5),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(width: 15),
              activeStep > 1 ? const Padding(
                padding: EdgeInsets.symmetric(horizontal: 6),
                child: Icon(
                  Icons.check_rounded,
                  size: 26,
                  color: AppTheme.yellowColor,
                ),
              ) : const SizedBox(width: 40,),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AutoSizeText(
                      "مراجعة الطلب من قبل لجنة الطاقة",
                      minFontSize: 10,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: activeStep == 1
                        ? AppTheme.textColor
                        : activeStep > 1
                        ? AppTheme.yellowColor
                        : AppTheme.textColor.withOpacity(0.6)
                      ),
                    ),
                    if (activeStep > 1) ...[
                      const SizedBox(height: 5),
                      AutoSizeText(
                        "2024/02/06",
                        minFontSize: 10,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: AppTheme.yellowColor,
                        ),
                      ),
                    ]
                  ],
                ),
              ),
            ]
          ),
          const SizedBox(height: 5),
          SizedBox(
            height: 40,
            child: Row(
              children: [
                const SizedBox(width: 40),
                VerticalDivider(
                  color: activeStep > 1 ? AppTheme.textColor  : AppTheme.textColor.withOpacity(0.6),
                  thickness: 1,
                  width: 20,
                ),
              ],
            ),
          ),
          const SizedBox(height: 5),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(width: 15),
              activeStep > 2 ? const Padding(
                padding: EdgeInsets.symmetric(horizontal: 6),
                child: Icon(
                  Icons.check_rounded,
                  size: 26,
                  color: AppTheme.yellowColor,
                ),
              ) : const SizedBox(width: 40,),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AutoSizeText(
                      "مراجعة الطلب من قبل لجنة الطاقة",
                      minFontSize: 10,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: activeStep == 2
                        ? AppTheme.textColor
                        : activeStep > 2
                        ? AppTheme.yellowColor
                        : AppTheme.textColor.withOpacity(0.6)
                      ),
                    ),
                    if (activeStep > 2) ...[
                      const SizedBox(height: 5),
                      AutoSizeText(
                        "2024/02/06",
                        minFontSize: 10,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: AppTheme.yellowColor,
                        ),
                      ),
                    ]
                  ],
                ),
              ),
            ]
          ),
          const SizedBox(height: 5),
          SizedBox(
            height: 40,
            child: Row(
              children: [
                const SizedBox(width: 40),
                VerticalDivider(
                  color: activeStep > 2 ? AppTheme.textColor  : AppTheme.textColor.withOpacity(0.6),
                  thickness: 1,
                  width: 20,
                ),
              ],
            ),
          ),
          const SizedBox(height: 5),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(width: 15),
              activeStep > 3 ? const Padding(
                padding: EdgeInsets.symmetric(horizontal: 6),
                child: Icon(
                  Icons.check_rounded,
                  size: 26,
                  color: AppTheme.yellowColor,
                ),
              ) : const SizedBox(width: 40,),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AutoSizeText(
                      "الدفع",
                      minFontSize: 10,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: activeStep == 3
                        ? AppTheme.textColor
                        : activeStep > 3
                        ? AppTheme.yellowColor
                        : AppTheme.textColor.withOpacity(0.6)
                      ),
                    ),
                    const SizedBox(height: 10),
                    if (activeStep > 3) ...[
                      AutoSizeText(
                        "2024/02/06",
                        minFontSize: 10,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: AppTheme.yellowColor,
                        ),
                      ),
                      const SizedBox(height: 5),
                    ],
                    if (activeStep >= 3) ...[
                      AutoSizeText(
                        "مبلغ الحصة",
                        minFontSize: 10,
                        textAlign: TextAlign.start,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: activeStep == 3
                          ? AppTheme.textColor
                          : AppTheme.yellowColor
                        ),
                      ),
                      AutoSizeText(
                        "5000 لتر / كاز اويل",
                        minFontSize: 10,
                        textAlign: TextAlign.start,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: activeStep == 3
                          ? AppTheme.textColor
                          : AppTheme.yellowColor
                        ),
                      ),
                      AutoSizeText(
                        "5,000,000 د.ع",
                        minFontSize: 10,
                        textAlign: TextAlign.start,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          fontWeight: FontWeight.w500,
                          color: activeStep == 3
                          ? AppTheme.textColor
                          : AppTheme.yellowColor
                        ),
                      ),
                    ],
                    if (activeStep == 3) ...[
                      const SizedBox(height: 10),
                      SizedBox(
                        width: 180,
                        child: AppButton(
                          onPressed: () {
                            pushScreenWithoutNavBar(context, PaymentScreen(
                              title: "دفع مبلغ الحصة",
                              onPaymentComplete: () {
                                pushScreenWithoutNavBar(context, FaceDetectionScreen());
                              },
                            ));
                          },
                          label: "ادفع",
                          isElevated: true
                        ),
                      )
                    ]
                  ],
                ),
              ),
            ]
          ),
          const SizedBox(height: 10),
          SizedBox(
            height: 40,
            child: Row(
              children: [
                const SizedBox(width: 40),
                VerticalDivider(
                  color: activeStep > 3 ? AppTheme.textColor  : AppTheme.textColor.withOpacity(0.6),
                  thickness: 1,
                  width: 20,
                ),
              ],
            ),
          ),
          const SizedBox(height: 5),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(width: 15),
              activeStep > 4 ? const Padding(
                padding: EdgeInsets.symmetric(horizontal: 6),
                child: Icon(
                  Icons.check_rounded,
                  size: 26,
                  color: AppTheme.yellowColor,
                ),
              ) : const SizedBox(width: 40,),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AutoSizeText(
                      "الاستلام",
                      minFontSize: 10,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: activeStep == 4
                        ? AppTheme.textColor
                        : activeStep > 4
                        ? AppTheme.yellowColor
                        : AppTheme.textColor.withOpacity(0.6)
                      ),
                    ),
                    const SizedBox(height: 5),
                    if (activeStep == 4) AutoSizeText(
                      "الطلب قيد التسليم",
                      minFontSize: 10,
                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
                        color: activeStep == 4
                        ? AppTheme.textColor
                        : AppTheme.yellowColor,
                      ),
                    ),
                    if (activeStep > 4) ...[
                      AutoSizeText(
                        "2024/02/13",
                        minFontSize: 10,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: activeStep == 4
                          ? AppTheme.textColor
                          : AppTheme.yellowColor,
                        ),
                      ),
                      AutoSizeText(
                        "تم الاستلام",
                        minFontSize: 10,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: activeStep == 4
                          ? AppTheme.textColor
                          : AppTheme.yellowColor,
                        ),
                      ),
                    ],
                    const SizedBox(height: 5),
                    if (activeStep == 4) ...[
                      const SizedBox(height: 5),
                      SizedBox(
                        width: 180,
                        child: AppButton(
                          onPressed: () {},
                          label: "تتبع الطلب",
                          isElevated: true
                        ),
                      )
                    ]
                  ],
                ),
              ),
            ]
          ),
        ],
      ),
    );
  }
}