import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/transaction/view/cancel_view.dart';
import 'package:cims_apps/features/transaction/view/done_view.dart';
import 'package:cims_apps/features/transaction/view/onprocess_view.dart';
import 'package:cims_apps/features/transaction/view/waiting_view.dart';
import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';
import 'package:provider/provider.dart';

class TransactionView extends StatelessWidget {
  const TransactionView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Tab> textTabs = const [
      Tab(text: 'Waiting'),
      Tab(text: 'On process'),
      Tab(text: 'Done'),
      Tab(text: 'Cancel'),
    ];
    List<Widget> listTabBarView = const [
      WaitingView(),
      OnProcessView(),
      DoneView(),
      CancelView(),
    ];

    return ChangeNotifierProvider(
        create: (context) => TransactionViewModel(),
        builder: (context, child) {
          return Scaffold(
            backgroundColor: ColorPalette.primary,
            body: SizedBox(
              child: Stack(
                children: [
                  const ImageView(image: PathAssets.imgDashboardAccount),
                  Column(
                    children: [
                      SizedBox(
                        height: SizeConfig.height * .05,
                      ),
                      const Center(
                        child: Text(
                          'Transaction',
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w700,
                              color: Colors.white),
                        ),
                      ),
                      SizedBox(
                        height: SizeConfig.height * .04,
                      ),
                      Container(
                        margin: const EdgeInsets.symmetric(horizontal: 24),
                        child: FlutterToggleTab(
                          height: SizeConfig.height * .065,
                          width: SizeConfig.width * .2,
                          marginSelected: const EdgeInsets.all(8.0),
                          isScroll: false,
                          selectedTextStyle: const TextStyle(
                            color: ColorPalette.primary,
                            fontWeight: FontWeight.w700,
                          ),
                          unSelectedTextStyle: const TextStyle(
                            color: ColorPalette.blackFont,
                            fontWeight: FontWeight.w700,
                          ),
                          unSelectedBackgroundColors: const [
                            ColorPalette.blue50
                          ],
                          selectedBackgroundColors: const [ColorPalette.white],
                          labels: const ['Subscribe', 'Reedem'],
                          selectedLabelIndex: (p0) {},
                          selectedIndex: 0,
                        ),
                      ),
                      Expanded(
                          child: DefaultTabController(
                        length: textTabs.length,
                        child: Container(
                          color: Colors.transparent,
                          padding: const EdgeInsets.only(top: 32.0),
                          child: Container(
                            margin: const EdgeInsets.only(top: 24),
                            padding: const EdgeInsets.only(top: 16.0),
                            decoration: const BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(24),
                                  topRight: Radius.circular(24)),
                            ),
                            child: Column(
                              children: [
                                TabBar(
                                  tabs: textTabs,
                                  indicatorColor: Colors.blueAccent,
                                ),
                                Expanded(
                                    child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                    horizontal: 16.0,
                                    vertical: 4.0,
                                  ),
                                  child: TabBarView(children: listTabBarView),
                                ))
                              ],
                            ),
                          ),
                        ),
                      )),
                    ],
                  )
                ],
              ),
            ),
          );
        });
  }
}