import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:novyronst/common/const/const_color.dart';
import 'package:novyronst/common/const/const_string.dart';
import 'package:novyronst/common/help/help_image.dart';
import 'package:novyronst/common/model/ny_drama_model.dart';
import 'package:novyronst/tools/widgets/novy_com_widget.dart';

import '../../../tools/util/app_screen.dart';
import '../../../tools/widgets/novy_button_bg.dart';
import '../../widgets/cut_corner_clipper.dart';
import '../../widgets/ny_tag_widget.dart';

class HomeRankWidget extends StatelessWidget {

  const HomeRankWidget({
    super.key,
    required this.dramaRanks,
  });

  final List<NyDramaModel> dramaRanks;

  @override
  Widget build(BuildContext context) {
    return CutCornerClipper(
      width: AppScreen.screenWidth - 32,
      cutCorner: CutCorner.bottomLeft,
      cutSize: 40,
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: dramaRanks.isEmpty ? SizedBox(height: 20,) : Column(
          children: [
            _buildRankList(),
            const SizedBox(height: 5),
            Row(
              children: [
                SizedBox(width: 20.w),
                NovyButtonBg(text: 'Keep Watching', width: 308.w,)
              ],
            )
          ],
        ),
      ),
    );
  }

  Row _buildRankList() {

    return Row(
      children: [
        _firstVideoView(),
        const SizedBox(width: 8),
        _otherVideoView(),
      ],
    );
  }

  Widget _firstVideoView() {
    NyDramaModel _item = dramaRanks.first;
    String _tag = "Safiray";
    if (_item.categoryList!=null && _item.categoryList!.isNotEmpty) {
      _tag = _item.categoryList!.first.name;
    }
    return SizedBox(
      width: 160.w,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              SizedBox(
                width: 160.w, height: 240.w,
                child: HelpImage.network(_item.imageUrl, fit: BoxFit.cover),
              ),
              Positioned(
                top: -10, left: 1,
                child: _colorsText(1),
              )
            ],
          ),
          const SizedBox(height: 10),
          NovyText(_item.name, fontSize: 15,
            color: Colors.black,
            fontFamily: ConstFont.montMedium,
          ),
          const SizedBox(height: 5),
          Row(
            children: [
              NyTagWidget(text: _tag),
            ],
          ),
          const SizedBox(height: 8),
        ],
      ),
    );
  }

  Widget _otherVideoView() {
    int _count = dramaRanks.length - 1;
    if (_count > 3) _count = 3;
    return Column(
      children: List.generate(_count, (index) {
        NyDramaModel _item = dramaRanks[index + 1];
        String _tag = "";
        if (_item.categoryList!=null && _item.categoryList!.isNotEmpty) {
          _tag = _item.categoryList!.first.name;
        }

        return Container(
          margin: const EdgeInsets.only(bottom: 8),
          width: 160.w, height: 93.w,
          child: Row(
            children: [
              HelpImage.network(_item.imageUrl, width: 62.w, height: 93.w),
              const SizedBox(width: 8),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _colorsText(index + 2),
                    const SizedBox(height: 8),
                    NovyText(_item.name, fontSize: 13,
                      color: Colors.black,
                    ),
                    const SizedBox(height: 5),
                    _tag.isNotEmpty ? NyTagWidget(text: _tag) : SizedBox()
                  ],
                ),
              )
            ],
          ),
        );
      })
    );
  }

  _colorsText(int index) {
    if (index == 4) {
      return Text(
        '$index',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.grey.withAlpha(127),
          fontStyle: FontStyle.italic,
        ),
      );
    }
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          colors: [
            ConstColor.withValue('#3ED71F'),
            ConstColor.withValue('#FFFF65'),
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ).createShader(bounds);
      },
      child: Text(
        '$index',
        style: TextStyle(
          fontSize: index==1 ? 40: 20,
          fontWeight: FontWeight.bold,
          color: Colors.white,
          fontStyle: FontStyle.italic,
        ),
      ),
    );
  }
}