import 'package:boilerplate/core/i18n/translations.g.dart';
import 'package:boilerplate/core/utils/navigator_util.dart';
import 'package:boilerplate/presentation/screen/products/detail/product_detail_screen.dart';
import 'package:boilerplate/presentation/widgets/ipm_title_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../../core/styles/my_colors.dart';
import '../../../../../core/styles/my_dimensions.dart';
import '../../../../../core/styles/my_font.dart';
import '../../../../bloc/product_detail/product_detail_bloc.dart';
import '../../../../widgets/ipm_image.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ProductDetailBloc, ProductDetailState>(
      builder: (context, state) {
        if (state.data.productData == null ||
            state.data.productData!.relateData.isEmpty) {
          return Container();
        }
        return Container(
          padding: EdgeInsets.only(
            top: MyDimens.dimen36,
            right: MyDimens.dimen16,
            left: MyDimens.dimen16,
            bottom: MediaQuery.of(context).padding.bottom + MyDimens.dimen16,
          ),
          color: Color(0xFFF4F1EB),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              IPMTitleText(
                title1: AppLocalizations.products.may_be_interest_title_1,
                title2: AppLocalizations.products.may_be_interest_title_2,
              ),
              GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 7 / 10,
                  mainAxisSpacing: MyDimens.dimen16,
                  crossAxisSpacing: MyDimens.dimen24,
                ),
                padding: EdgeInsets.symmetric(
                  vertical: MyDimens.dimen14,
                  horizontal: MyDimens.dimen16,
                ),
                scrollDirection: Axis.vertical,
                itemCount: state.data.productData!.relateData.length,
                itemBuilder: (context, index) {
                  final item = state.data.productData!.relateData[index];

                  return GestureDetector(
                    onTap: () {
                      NavigatorUtil.pushToPage(
                        ProductDetailScreen(prodictId: item.id),
                      );
                    },
                    child: Column(
                      children: [
                        Container(
                          width: MyDimens.dimen160,
                          height: MyDimens.dimen164,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: IPMImage(
                              url: item.cover ?? '',
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        SizedBox(height: MyDimens.dimen8),
                        SizedBox(
                          width: MyDimens.dimen160,
                          child: Text(
                            item.name ?? '',
                            style: MyFont.regular12.copyWith(
                              color: MyColor.headerColor,
                              overflow: TextOverflow.ellipsis,
                            ),
                            maxLines: 2,
                          ),
                        ),
                      ],
                    ),
                  );
                },
              )
            ],
          ),
        );
      },
    );
  }
}
