import 'package:boilerplate/core/styles/my_colors.dart';
import 'package:boilerplate/core/styles/my_dimensions.dart';
import 'package:boilerplate/core/styles/my_font.dart';
import 'package:boilerplate/core/utils/navigator_util.dart';
import 'package:boilerplate/presentation/bloc/landing/bottom_navigation_cubit.dart';
import 'package:boilerplate/presentation/screen/products/list/product_list_screen.dart';
import 'package:boilerplate/presentation/widgets/ipm_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../bloc/home/home_bloc.dart';

class HomeProductType extends StatefulWidget {
  const HomeProductType({Key? key}) : super(key: key);

  @override
  State<HomeProductType> createState() => _HomeProductTypeState();
}

class _HomeProductTypeState extends State<HomeProductType> {
  late final ScrollController controller;

  double scrollIndecator = MyDimens.dimen30 * 0.2;

  @override
  void initState() {
    super.initState();

    controller = ScrollController();
  }

  bool _onScroll(ScrollNotification notification) {
    final p = notification.metrics.pixels *
        100 /
        notification.metrics.maxScrollExtent;

    setState(() {
      if (MyDimens.dimen30 * (p / 100) <= MyDimens.dimen30 * 0.2) {
        scrollIndecator = MyDimens.dimen30 * 0.2;
      } else {
        scrollIndecator = MyDimens.dimen30 * (p / 100);
      }
    });

    return true;
  }

  @override
  void dispose() {
    controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<HomeBloc, HomeState>(
      builder: (context, state) {
        if (state.data.intellectualTypes.isEmpty) {
          return Container();
        }

        return Column(
          children: [
            SizedBox(
              height: MyDimens.dimen160,
              child: NotificationListener<ScrollNotification>(
                onNotification: _onScroll,
                child: ListView.builder(
                  controller: controller,
                  padding: EdgeInsets.symmetric(
                    vertical: MyDimens.dimen14,
                    horizontal: MyDimens.dimen16,
                  ),
                  scrollDirection: Axis.horizontal,
                  itemCount: state.data.intellectualTypes.length,
                  itemBuilder: (context, index) {
                    final item = state.data.intellectualTypes[index];
                    return GestureDetector(
                      onTap: () {
                        NavigatorUtil.pushToPage(ProductListScreen(
                            inteId: item.id, myTitle: item.name));
                      },
                      child: Column(
                        children: [
                          Container(
                            margin: EdgeInsets.only(right: MyDimens.dimen12),
                            width: MyDimens.dimen70,
                            height: MyDimens.dimen70,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black.withOpacity(0.2),
                                  blurRadius: 5,
                                  offset: const Offset(1, 4),
                                )
                              ],
                            ),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: IPMImage(
                                url: item.image ?? "",
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          SizedBox(height: MyDimens.dimen8),
                          SizedBox(
                            width: MyDimens.dimen70,
                            child: Text(
                              item.name ?? "",
                              style: MyFont.regular12.copyWith(
                                color: MyColor.headerColor,
                                overflow: TextOverflow.ellipsis,
                              ),
                              maxLines: 3,
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
            ),
            Stack(
              children: [
                Container(
                  height: MyDimens.dimen4,
                  width: MyDimens.dimen30,
                  decoration: BoxDecoration(
                    color: const Color(0xFFD9D9D9),
                    borderRadius: BorderRadius.circular(100),
                  ),
                ),
                Container(
                  height: MyDimens.dimen4,
                  width: scrollIndecator,
                  decoration: BoxDecoration(
                    color: const Color(0xFFB21F29),
                    borderRadius: BorderRadius.circular(100),
                  ),
                ),
              ],
            ),
            SizedBox(height: MyDimens.dimen12),
            Container(
              margin: EdgeInsets.symmetric(horizontal: MyDimens.dimen16),
              decoration: const BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Color(0xffEAEAEA),
                    width: 1,
                  ),
                ),
              ),
            )
          ],
        );
      },
    );
  }
}
