import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:novyronst/common/help/app_nav.dart';
import 'package:novyronst/common/model/ny_category_model.dart';
import 'package:novyronst/pages/first/pages/category_list_page.dart';
import 'package:novyronst/pages/widgets/cut_corner_clipper.dart';
import 'package:novyronst/pages/widgets/ny_progress_widget.dart';
import 'package:novyronst/pages/widgets/ny_tag_widget.dart';
import 'package:novyronst/root/lib_export.dart';
import 'package:novyronst/tools/widgets/extend_widget.dart';
import 'package:novyronst/tools/widgets/novy_button_bg.dart';
import 'package:novyronst/tools/widgets/novy_com_widget.dart';
import 'package:novyronst/tools/widgets/novy_img_bg.dart';

class HomeFirstView extends StatefulWidget {
  const HomeFirstView({super.key, required this.categories});

  final List<NyCategoryModel> categories;

  @override
  State<StatefulWidget> createState() {
    return _HomeFirstViewState();
  }
}

class _HomeFirstViewState extends State<HomeFirstView> {
  @override
  Widget build(BuildContext context) {
    const double space = 25;
    return Stack(
      children: [
        // 151
        SizedBox(height: 151 - space + 200 + 52 + 20),
        HelpImage.asset(
          ConstImage.homeFirst,
          width: AppScreen.screenWidth,
          fit: BoxFit.fill,
        ),
        Positioned(
          top: 151 - space,
          left: 16,
          right: 16,
          child: Column(
            children: [
              CutCornerClipper(
                width: AppScreen.screenWidth - 32,
                height: 204,
                cutSize: 80,
                child: _buildVideoItem(),
              ),
              const SizedBox(height: 16),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(widget.categories.length, (index) {
                    final item = widget.categories[index];
                    return Container(
                      margin: const EdgeInsets.only(right: 8),
                      child: NovyImgBg(
                        imgBg: ConstImage.cateBg,
                        height: 52,
                        child: Stack(
                          children: [
                            NovyText(
                              item.name,
                              color: ConstColor.btGreen,
                              fontSize: 21,
                              textAlign: TextAlign.center,
                              fontFamily: ConstFont.montBlack,
                              shadow: Shadow(
                                offset: const Offset(1, 1), // X: 1, Y: 1
                                blurRadius: 0, // Blur: 0
                                color: Colors.black, // #000000
                              ),
                            ),
                            Positioned(
                              bottom: 0,
                              left: 0,
                              right: 0,
                              child: Container(height: 2, color: Colors.black),
                            ),
                          ],
                        ),
                      ),
                    ).addInkWell(
                      onTap: () {
                        AppNav.to(CategoryListPage(preCategory: item));
                      },
                    );
                  }),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildVideoItem() {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: Column(
        children: [
          Row(
            children: [
              NovyText(
                'Current Viewing Progress',
                color: Colors.black,
                fontSize: 16,
                fontFamily: ConstFont.montBlack,
              ),
              const SizedBox(width: 10),
              HelpImage.asset(ConstImage.homeCurrentTag, height: 10),
            ],
          ),
          const SizedBox(height: 10),
          Row(
            children: [
              Container(
                color: Colors.grey.withAlpha(200),
                width: 60,
                height: 90,
              ),
              const SizedBox(width: 12),
              SizedBox(
                height: 90,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    NovyText(
                      'Jdksyjs dsaoy',
                      color: Colors.black,
                      fontSize: 14,
                      fontFamily: ConstFont.montMedium,
                    ),
                    const SizedBox(height: 4),
                    NovyText(
                      'Jdksyjs dsaoy dasku dsaldsa dljas',
                      color: Colors.grey,
                      fontSize: 10,
                      fontFamily: ConstFont.montRegular,
                      maxLines: 2,
                    ),
                    Spacer(),
                    Row(
                      children: [
                        NyTagWidget(text: 'Safiray'),
                        const SizedBox(width: 8),
                        NyHotWidget(text: '12.4k'),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          NyProgressWidget(),
          const SizedBox(height: 6),
          NovyButtonBg(text: 'Keep Watching', type: 2, width: 327.w),
        ],
      ),
    );
  }
}