import 'dart:developer';

import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:get/get.dart';
import 'package:traderscircuit/Utils/Common/CommonAppbar.dart';
import 'package:traderscircuit/Utils/Common/comonGlassmorphicContainer.dart';
import 'package:traderscircuit/Utils/Common/sized_box.dart';
import 'package:traderscircuit/Utils/text.dart';
import 'package:traderscircuit/controller/content_bytes_controller.dart';
import 'package:traderscircuit/model/ContentBytesModel/content_bytes_categories_model.dart';
import 'package:traderscircuit/model/ContentBytesModel/content_bytes_model.dart';
import 'package:traderscircuit/resources/routes/route_name.dart';
import 'package:traderscircuit/view/Sidemenu/ContentByte/PlayerWidget.dart';
import 'package:traderscircuit/view/Sidemenu/ContentByte/read_pdf.dart';
import 'package:traderscircuit/view/onBoarding/splashScreen1.dart';
import 'package:traderscircuit/view_model/ContentBytesApi/content_bytes_api.dart';

class ProgressBarState {
  ProgressBarState({
    required this.current,
    required this.buffered,
    required this.total,
  });
  final Duration current;
  final Duration buffered;
  final Duration total;
}

enum ButtonState { paused, playing }

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

  @override
  State<ContentBytes> createState() => _ContentBytesState();
}

class _ContentBytesState extends State<ContentBytes> {
  final GlobalKey<ScaffoldState> _scaffoldKey1 = GlobalKey<ScaffoldState>();

  final selectedIndex = 0.obs;
  List<String> reels = [
    "assets/images/png/sidemenu/reels1.png",
    "assets/images/png/sidemenu/reels2.png",
    "assets/images/png/sidemenu/reels3.png",
    "assets/images/png/sidemenu/reels4.png",
  ];

  List<String> mostread = [
    "assets/images/png/sidemenu/Read1.png",
    "assets/images/png/sidemenu/Read2.png",
    "assets/images/png/sidemenu/Read1.png",
  ];

  ContentBytesController contentBytesController =
      Get.put(ContentBytesController());
  @override
  void initState() {
    ContentBytesApi().getContentBytesCategoriesData().then((value) {
      contentBytesController.contentBytesCategoriesModel =
          ContentBytesCategoriesModel.fromJson(value.data);
    });
    ContentBytesApi().getContentBytesData("", "", "").then((value) {
      contentBytesController.contentBytesModel =
          ContentBytesModel.fromJson(value.data);
      contentBytesController.isApiCalling.value = false;
      setState(() {});
    });
    super.initState();
  }

  @override
  void dispose() {
    contentBytesController.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return true;
      },
      child: Scaffold(
        key: _scaffoldKey1,
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: Obx(
          () => contentBytesController.isAudioSeekBarVisible.value
              ? commonGlassContainer(
                  borderradius: 8,
                  width: Get.size.width,
                  height: 100,
                  customWidget: Row(
                    children: [
                      Expanded(
                        flex: 1,
                        child: Align(
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(100),
                            child: Image.network(
                              contentBytesController
                                  .contentBytesModel
                                  .data!
                                  .audio![contentBytesController
                                      .indexForAudios.value]
                                  .image!,
                              width: 57,
                              height: 57,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 3,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              contentBytesController
                                  .contentBytesModel
                                  .data!
                                  .audio![contentBytesController
                                      .indexForAudios.value]
                                  .title!,
                              style: const TextStyle(
                                fontSize: 14,
                                color: Colors.white,
                                fontFamily: 'hiragino',
                                fontWeight: FontWeight.w600,
                                height: 1.5,
                              ),
                            ),
                            // SizedBox(height: 5),
                            Text(
                              contentBytesController
                                  .contentBytesModel
                                  .data!
                                  .audio![contentBytesController
                                      .indexForAudios.value]
                                  .description!,
                              style: const TextStyle(
                                fontSize: 14,
                                color: Colors.white,
                                fontFamily: 'hiragino',
                                fontWeight: FontWeight.w600,
                                height: 1.5,
                              ),
                            ),
                            ValueListenableBuilder<ProgressBarState>(
                              valueListenable:
                                  contentBytesController.progressNotifier,
                              builder: (context, value, _) {
                                return ProgressBar(
                                  progress: value.current,
                                  buffered: value.buffered,
                                  total: value.total,
                                  onSeek: contentBytesController.seek,
                                  barHeight: 4,
                                  thumbRadius: 6,
                                  thumbGlowRadius: 15,
                                  timeLabelTextStyle: TextStyle(
                                    color: Colors.white,
                                  ),
                                  thumbColor: Colors.white,
                                  baseBarColor: Colors.white.withOpacity(0.3),
                                  progressBarColor: Colors.white,
                                  bufferedBarColor:
                                      Colors.white.withOpacity(0.3),
                                );
                              },
                            ),
                          ],
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: ValueListenableBuilder<ButtonState>(
                          valueListenable:
                              contentBytesController.buttonNotifier,
                          builder: (context, value, _) {
                            switch (value) {
                              case ButtonState.paused:
                                return IconButton(
                                  icon: const Icon(
                                    Icons.play_arrow_rounded,
                                    color: Colors.white,
                                  ),
                                  iconSize: 50.0,
                                  onPressed: () => contentBytesController.play(
                                      contentBytesController
                                          .indexForAudios.value),
                                );
                              case ButtonState.playing:
                                return IconButton(
                                  icon: const Icon(Icons.pause,
                                      color: Colors.white),
                                  iconSize: 50.0,
                                  onPressed: contentBytesController.pause,
                                );
                            }
                          },
                        ),
                      ),
                    ],
                  ),
                )
              : Container(),
        ),
        backgroundColor: Colors.black,
        extendBody: true,
        appBar: const CommonAppbar(titleTxt: "Content Bytes"),
        body: Stack(
          children: [
            const CommonBlurLeft(),
            const CommonBlurRight(),
            Stack(
              children: [
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                  child: ListView(
                    children: [
                      const SizedBox(
                        height: 10,
                      ),
                      DefaultTabController(
                        length: 3,
                        // initialIndex: selectedIndex.value,
                        child: Column(
                          children: [
                            ContentTabBar(),
                            SizedBox(
                              height: 30.h,
                            ),
                            SizedBox(
                              height: 600.h,
                              child: TabBarView(
                                children: [
                                  Videos(images: reels),
                                  Audios(),
                                  Reads(mostread: mostread),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      sizedBoxHeight(40.h),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class Reads extends StatefulWidget {
  const Reads({
    super.key,
    required this.mostread,
  });

  final List<String> mostread;

  @override
  State<Reads> createState() => _ReadsState();
}

class _ReadsState extends State<Reads> {
  ContentBytesController contentBytesController =
      Get.put(ContentBytesController());
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              text22W600('Content Bytes'),
              GestureDetector(
                onTap: () {
                  Get.toNamed(RouteName.bookmore);
                },
                child: Container(
                  height: 35.h,
                  width: 105.w,
                  decoration: BoxDecoration(
                      color: Color(0xFF3A3A3A).withOpacity(0.6),
                      borderRadius: BorderRadius.circular(5.r),
                      border: Border.all(
                        color: Color(0xFF3A3A3A),
                      )),
                  child: Center(
                    child: text16W500('View More'),
                  ),
                ),
              ),
            ],
          ),
          sizedBoxHeight(8.w),
          text16W400_DADADA('Harnessing the Power of Ebooks'),
          sizedBoxHeight(20.h),
          ListView.builder(
              itemCount:
                  contentBytesController.contentBytesModel.data!.read!.length,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (ctx, index) {
                return Column(
                  children: [
                    InkWell(
                      onTap: () {
                        Get.to(ReadPDF(
                          title: contentBytesController
                              .contentBytesModel.data!.read![index].title,
                          pdfUrfl: contentBytesController
                              .contentBytesModel.data!.read![index].file,
                        ));
                      },
                      child: commonGlassContainer(
                        borderradius: 8,
                        width: double.infinity,
                        height: 150.h,
                        customWidget: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            const SizedBox(
                              width: 10,
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const Spacer(),
                                SizedBox(
                                  width: 235.w,
                                  child: text20W400(
                                      '"${contentBytesController.contentBytesModel.data!.read![index].title}"'),
                                ),
                                sizedBoxHeight(10.h),
                                SizedBox(
                                  width: 230.w,
                                  child: text16W400(
                                      '"${contentBytesController.contentBytesModel.data!.read![index].description}"'),
                                ),
                                const Spacer()
                              ],
                            ),
                            Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Image.network(
                                  "${contentBytesController.contentBytesModel.data!.read![index].image}",
                                  height: 110,
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                    ),
                    sizedBoxHeight(20.h),
                  ],
                );
              }),
          // sizedBoxHeight(30.h),
          // text22W500("Most Read"),
          // sizedBoxHeight(25.h),
          // Container(
          //   height: 220.h,
          //   child: ListView.separated(
          //     separatorBuilder: (context, index) {
          //       return SizedBox(
          //         width: 10.w,
          //       );
          //     },
          //     scrollDirection: Axis.horizontal,
          //     itemCount: 3,
          //     itemBuilder: (context, index) {
          //       return Column(
          //         crossAxisAlignment: CrossAxisAlignment.start,
          //         children: [
          //           Container(
          //             height: 216.h,
          //             width: 150.w,
          //             decoration: BoxDecoration(
          //               gradient: LinearGradient(
          //                 begin: Alignment.topLeft,
          //                 end: Alignment.bottomRight,
          //                 colors: [
          //                   Colors.white.withOpacity(0.1),
          //                   const Color(0xFFFFFFFF).withOpacity(0.05),
          //                 ],
          //                 stops: [
          //                   0.1,
          //                   1,
          //                 ],
          //               ),
          //               borderRadius: BorderRadius.circular(8),
          //             ),
          //             child: Image.asset(mostread[index]),
          //           ),
          //         ],
          //       );
          //     },
          //   ),
          // ),
          // sizedBoxHeight(30.h),
          // text22W500("Previous Read"),
          // sizedBoxHeight(20.h),
          // Container(
          //   height: 90.h,
          //   child: ListView.separated(
          //     separatorBuilder: (context, index) {
          //       return SizedBox(
          //         width: 10.w,
          //       );
          //     },
          //     scrollDirection: Axis.horizontal,
          //     itemCount: 2,
          //     itemBuilder: (context, index) {
          //       return Column(
          //         crossAxisAlignment: CrossAxisAlignment.start,
          //         children: [
          //           Container(
          //             height: 85.h,
          //             width: 230.w,
          //             decoration: BoxDecoration(
          //               gradient: LinearGradient(
          //                 begin: Alignment.topLeft,
          //                 end: Alignment.bottomRight,
          //                 colors: [
          //                   Colors.white.withOpacity(0.1),
          //                   const Color(0xFFFFFFFF).withOpacity(0.05),
          //                 ],
          //                 stops: [
          //                   0.1,
          //                   1,
          //                 ],
          //               ),
          //               borderRadius: BorderRadius.circular(8),
          //             ),
          //             child: Row(
          //               // mainAxisAlignment:
          //               //     MainAxisAlignment.start,
          //               children: [
          //                 const SizedBox(
          //                   width: 10,
          //                 ),
          //                 Image.asset(mostread[index]),
          //                 SizedBox(
          //                   width: 15.w,
          //                 ),
          //                 Column(
          //                   crossAxisAlignment: CrossAxisAlignment.start,
          //                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          //                   children: [
          //                     SizedBox(
          //                       width: 135.w,
          //                       child: text12W500("Stock Market Essentials"),
          //                     ),
          //                     SizedBox(
          //                       width: 130.w,
          //                       child: text10W300(
          //                           "A Comprehensive Guide to Understanding the Market"),
          //                     )
          //                   ],
          //                 )
          //               ],
          //             ),
          //           ),
          //         ],
          //       );
          //     },
          //   ),
          // ),
        ],
      ),
    );
  }
}

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

  @override
  State<Audios> createState() => _AudiosState();
}

class _AudiosState extends State<Audios> {
  ContentBytesController contentBytesController =
      Get.put(ContentBytesController());

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Row(
          //   children: [
          //     const SizedBox(
          //       width: 300,
          //       child: CustomTextFormField(
          //         leadingIcon: Icon(Icons.search),
          //       ),
          //     ),
          //     SizedBox(
          //       width: 15.w,
          //     ),
          //     Image.asset(
          //       "assets/images/png/filter.png",
          //       height: 30.h,
          //       width: 30.w,
          //     ),
          //   ],
          // ),
          // SizedBox(
          //   height: 10.h,
          // ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              text22W600('Content Bytes'),
              GestureDetector(
                onTap: () {
                  Get.toNamed(RouteName.audiomore);
                },
                child: Container(
                  height: 35.h,
                  width: 105.w,
                  decoration: BoxDecoration(
                      color: Color(0xFF3A3A3A).withOpacity(0.6),
                      borderRadius: BorderRadius.circular(5.r),
                      border: Border.all(
                        color: Color(0xFF3A3A3A),
                      )),
                  child: Center(
                    child: text16W500('View More'),
                  ),
                ),
              ),
            ],
          ),
          sizedBoxHeight(8.w),
          text16W400_DADADA('The Beauty and Power of Audios'),
          sizedBoxHeight(20.h),
          GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              mainAxisExtent: 172,
              crossAxisCount: 2, // number of items in each row
              mainAxisSpacing: 8.0, // spacing between rows
              crossAxisSpacing: 8.0, // spacing between columns
            ),

            itemCount: contentBytesController
                .contentBytesModel.data!.audio!.length, // total number of items
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {
                  contentBytesController.init(0);
                  contentBytesController.isAudioSeekBarVisible.value = true;
                  //https://actions.google.com/sounds/v1/horror/aggressive_zombie_snarls.ogg
                },
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.white.withOpacity(0.1),
                        const Color(0xFFFFFFFF).withOpacity(0.05),
                      ],
                      stops: [
                        0.1,
                        1,
                      ],
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Stack(
                    children: [
                      Image.network(
                        contentBytesController
                            .contentBytesModel.data!.audio![index].image!,
                      ),
                      Positioned(
                        bottom: 5,
                        left: 5,
                        child: Row(
                          children: [
                            CircleAvatar(
                              radius: 18.sp,
                              child: const Icon(Icons.headphones),
                            ),
                            SizedBox(
                              width: 5.w,
                            ),
                            SizedBox(
                              width: 125.w,
                              child: text14W500(contentBytesController
                                  .contentBytesModel
                                  .data!
                                  .audio![index]
                                  .title!),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
          // SizedBox(
          //   height: 20.h,
          // ),
          // text22W600("New Release"),
          // SizedBox(
          //   height: 25.h,
          // ),
          // Container(
          //   height: 250.h,
          //   child: ListView.separated(
          //     separatorBuilder: (context, index) {
          //       return const SizedBox(
          //         width: 10,
          //       );
          //     },
          //     scrollDirection: Axis.horizontal,
          //     itemCount:
          //         contentBytesController.contentBytesModel.data!.audio!.length,
          //     itemBuilder: (context, index) {
          //       return Column(
          //         crossAxisAlignment: CrossAxisAlignment.start,
          //         children: [
          //           Container(
          //             height: 183.h,
          //             width: 148.w,
          //             decoration: BoxDecoration(
          //               gradient: LinearGradient(
          //                 begin: Alignment.topLeft,
          //                 end: Alignment.bottomRight,
          //                 colors: [
          //                   Colors.white.withOpacity(0.1),
          //                   const Color(0xFFFFFFFF).withOpacity(0.05),
          //                 ],
          //                 stops: [
          //                   0.1,
          //                   1,
          //                 ],
          //               ),
          //               borderRadius: BorderRadius.circular(8),
          //             ),
          //             child: Stack(
          //               children: [
          //                 Image.network(
          //                   contentBytesController
          //                       .contentBytesModel.data!.audio![index].image!,
          //                 ),
          //                 const Positioned(
          //                   right: 5,
          //                   top: 5,
          //                   child: CircleAvatar(
          //                     radius: 15,
          //                     child: Icon(
          //                       Icons.headphones,
          //                       size: 20,
          //                     ),
          //                   ),
          //                 ),
          //               ],
          //             ),
          //           ),
          //           const SizedBox(
          //             height: 10,
          //           ),
          //           Row(
          //             mainAxisAlignment: MainAxisAlignment.start,
          //             children: [
          //               SizedBox(
          //                 width: 148.w,
          //                 child: text14W500Overflow(
          //                   contentBytesController
          //                       .contentBytesModel.data!.audio![index].title!,
          //                 ),
          //               ),
          //             ],
          //           )
          //         ],
          //       );
          //     },
          //   ),
          // )
        ],
      ),
    );
  }
}

class Videos extends StatefulWidget {
  const Videos({
    super.key,
    required this.images,
  });

  final List<String> images;

  @override
  State<Videos> createState() => _VideosState();
}

class _VideosState extends State<Videos> {
  ContentBytesController contentBytesController =
      Get.put(ContentBytesController());

  Widget itemFilter(int index) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Gap(8),
        text18W400(
          contentBytesController
              .contentBytesCategoriesModel.data![index].categoryName!,
          texAl: TextAlign.center,
        ),
        index ==
                contentBytesController
                        .contentBytesCategoriesModel.data!.length -
                    1
            ? const SizedBox()
            : const Divider(
                color: Color(0xFF2C2C2C),
                thickness: 0.6,
                endIndent: 0,
              ),
      ],
    );
  }

  Widget filter() {
    return PopupMenuButton(
      icon: Image.asset(
        "assets/images/png/filter.png",
        height: 30.h,
        width: 30.w,
      ),
      color: const Color(0xFF191919),
      itemBuilder: (context) {
        return [
          PopupMenuItem(
              child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                height: (Get.height *
                        contentBytesController
                            .contentBytesCategoriesModel.data!.length) /
                    17,
                width: 150,
                child: ListView.builder(
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    itemCount: contentBytesController
                        .contentBytesCategoriesModel.data!.length,
                    itemBuilder: (ctx, index) {
                      return InkWell(
                          onTap: () {
                            //     contentBytesController.isApiCalling.value = true;
                            Get.back();
                            contentBytesController.filterId =
                                contentBytesController
                                    .contentBytesCategoriesModel
                                    .data![index]
                                    .id!;

                            log(contentBytesController.filterId.toString());
                          },
                          child: itemFilter(index));
                    }),
              ),
              // GestureDetector(
              //     onTap: () async {
              //       //  contentBytesController.isApiCalling.value = true;
              //       Get.back();
              //       // await InventoriesApi()
              //       //     .getInventoriesData(
              //       //         searchController.text,
              //       //         filterList,
              //       //         inventoriesController.fromWarehouse
              //       //             ? inventoriesController.wareHouseId
              //       //             : 0)
              //       //     .then((value) async {
              //       //   inventoriesController.inventoriesDataModel.value =
              //       //       InventoriesDataModel.fromJson(value.data);

              //       //   inventoriesController.isApiCalling.value = false;
              //       // });
              //     },
              //     child: Container(
              //       padding:
              //           EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.h),
              //       margin:
              //           EdgeInsets.symmetric(horizontal: 30.w, vertical: 25.h),
              //       decoration: BoxDecoration(
              //           color: AppColors.buttoncolour,
              //           borderRadius: BorderRadius.circular(20)),
              //       child: Center(child: textWhite16('Apply Now')),
              //     ))
            ],
          ))
        ];
      },
    );
  }

  Widget videoCard(Video video) {
    return InkWell(
      onTap: () {
        Get.to(() => const PlayerWidget(), arguments: {
          "video_url": video.file,
        });
      },
      child: commonGlassContainer(
          borderradius: 8,
          width: double.infinity,
          height: 320.h,
          customWidget: Padding(
            padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
            child: Column(
              children: [
                Container(
                  height: 200.h,
                  width: double.infinity,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.r),
                      image: DecorationImage(
                          image: NetworkImage(
                        video.image!,
                      ))),
                  child: Center(
                    child: SvgPicture.asset(
                      'assets/images/svg/gridicons_play.svg',
                      height: 56.h,
                      width: 56.w,
                    ),
                  ),
                ),
                sizedBoxHeight(20.h),
                Row(
                  children: [
                    // CircleAvatar(
                    //   radius: 23.r,
                    //   backgroundImage: const AssetImage(
                    //       'assets/images/png/Ellipse 1494.png'),
                    // ),
                    sizedBoxWidth(10.w),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        text18W500(video.title!),
                        text16W400(video.description!),
                        // sizedBoxHeight(10.h),
                        //text12W400_979797('20k views . 2 days ago'),
                        text12W400_979797('2 days ago'),
                      ],
                    )
                  ],
                )
              ],
            ),
          )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Row(
            //   children: [
            //     const SizedBox(
            //       width: 295,
            //       child: CustomTextFormField(
            //         leadingIcon: Icon(Icons.search),
            //       ),
            //     ),
            //     SizedBox(
            //       width: 15.w,
            //     ),
            //     filter(),
            //   ],
            // ),
            // SizedBox(
            //   height: 10.h,
            // ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                text22W600('Content Bytes'),
                GestureDetector(
                  onTap: () {
                    Get.toNamed(RouteName.videosmore);
                  },
                  child: Container(
                    height: 35.h,
                    width: 105.w,
                    decoration: BoxDecoration(
                        color: Color(0xFF3A3A3A).withOpacity(0.6),
                        borderRadius: BorderRadius.circular(5.r),
                        border: Border.all(
                          color: Color(0xFF3A3A3A),
                        )),
                    child: Center(
                      child: text16W500('View More'),
                    ),
                  ),
                ),
              ],
            ),
            sizedBoxHeight(8.w),
            text16W400_DADADA('The Beauty and Power of Video'),
            sizedBoxHeight(20.h),
            contentBytesController.isApiCalling.value
                ? const Column(
                    children: [
                      Gap(50),
                      Center(
                        child: CircularProgressIndicator(
                          color: Color(0xFF9A0000),
                        ),
                      ),
                    ],
                  )
                : Column(
                    children: [
                      contentBytesController
                                  .contentBytesModel.data!.video!.length <
                              1
                          ? const SizedBox()
                          : videoCard(contentBytesController
                              .contentBytesModel.data!.video![0]),
                      contentBytesController
                                  .contentBytesModel.data!.video!.length <=
                              1
                          ? const SizedBox()
                          : sizedBoxHeight(20.h),
                      contentBytesController
                                  .contentBytesModel.data!.video!.length <
                              2
                          ? const SizedBox()
                          : videoCard(contentBytesController
                              .contentBytesModel.data!.video![1]),
                      sizedBoxHeight(15.h),
                      // text22W600("Reels"),
                      // sizedBoxHeight(25.h),
                      // Container(
                      //   height: 500,
                      //   child: GridView.builder(
                      //     physics: const NeverScrollableScrollPhysics(),
                      //     gridDelegate:
                      //         const SliverGridDelegateWithFixedCrossAxisCount(
                      //       mainAxisExtent: 215,
                      //       crossAxisCount: 2, // number of items in each row
                      //       mainAxisSpacing: 8.0, // spacing between rows
                      //       crossAxisSpacing: 8.0, // spacing between columns
                      //     ),

                      //     itemCount: 4, // total number of items
                      //     itemBuilder: (context, index) {
                      //       return InkWell(
                      //         onTap: () {
                      //           Get.to(
                      //             () => const Reels(),
                      //           );
                      //         },
                      //         child: Container(
                      //           decoration: BoxDecoration(
                      //             gradient: LinearGradient(
                      //               begin: Alignment.topLeft,
                      //               end: Alignment.bottomRight,
                      //               colors: [
                      //                 Colors.white.withOpacity(0.1),
                      //                 const Color(0xFFFFFFFF).withOpacity(0.05),
                      //               ],
                      //               stops: [
                      //                 0.1,
                      //                 1,
                      //               ],
                      //             ),
                      //             borderRadius: BorderRadius.circular(8),
                      //           ),
                      //           child: Image.asset(widget.images[index]),
                      //         ),
                      //       );
                      //     },
                      //   ),
                      // ),

                      //  sizedBoxHeight(10.h),

                      contentBytesController
                                  .contentBytesModel.data!.video!.length <
                              3
                          ? const SizedBox()
                          : ListView.builder(
                              physics: const NeverScrollableScrollPhysics(),
                              itemCount: contentBytesController
                                      .contentBytesModel.data!.video!.length -
                                  2,
                              shrinkWrap: true,
                              itemBuilder: (ctx, index) {
                                return Container(
                                  margin: const EdgeInsets.only(
                                    bottom: 20,
                                  ),
                                  child: videoCard(contentBytesController
                                      .contentBytesModel
                                      .data!
                                      .video![index + 2]),
                                );
                              })
                    ],
                  ),
          ],
        ),
      ),
    );
  }
}

class ContentTabBar extends StatelessWidget {
  // Set the desired height

  @override
  Widget build(BuildContext context) {
    return TabBar(
        tabAlignment: TabAlignment.fill,
        isScrollable: false,
        dividerColor: Colors.transparent,
        labelStyle: TextStyle(
            fontSize: 18.sp,
            color: Colors.white,
            fontWeight: FontWeight.w500,
            fontFamily: 'hiragino'),
        indicatorSize: TabBarIndicatorSize.tab,
        indicatorWeight: 2,
        indicatorColor: const Color(0xff6C0000),
        labelColor: Colors.white,
        unselectedLabelColor: const Color(0xFF464646),
        overlayColor: MaterialStateProperty.all(const Color(0xFFFFFFFF)),
        tabs: const [
          Tab(
            text: 'Videos',
          ),
          Tab(
            text: 'Audios',
          ),
          Tab(
            text: 'Reads',
          ),
        ]);
  }
}
