// import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:taafee_mobile/common/const/const.dart';
import 'package:taafee_mobile/common/extensions/widget_extension.dart';
import 'package:taafee_mobile/common/widgets/text.dart';
import 'package:taafee_mobile/core/routing/routing_manager.dart';
import 'package:taafee_mobile/features/category/business_logic_layer/category_controller.dart';
import 'package:taafee_mobile/features/category/data_layer/model/category.dart';

import '../../../../common/widgets/toast.dart';

class CategoryWidget extends StatelessWidget {
  final CategoryModel categoryModel;
  CategoryWidget(this.categoryModel,
      {super.key, this.enableTabletDesign = true});
  final CategoryController categoryController = Get.find<CategoryController>();
  final bool enableTabletDesign;
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      //width: Get.width * .3,
      height: Get.width * .3,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5),
      ),
      child: Responsive.isTablet() && enableTabletDesign
          ? Row(
              children: [
                Container().expanded(1),
                SvgPicture.network(
                  Domain.domain + categoryModel.icon.substring(6),
                  width: Responsive.isTablet() ? 72 : 36,
                  height: Responsive.isTablet() ? 72 : 36,
                ).expanded(2),
                // CachedNetworkImage(
                //     imageUrl:
                //         Domain.domain + categoryModel.icon.substring(6))
                // .expanded(2),
                Container().expanded(1),
                RegularTextWidget(
                  categoryModel.name,
                  fontSize: Responsive.isTablet() ? 16 : 12,
                  overflow: TextOverflow.ellipsis,
                ).expanded(4),
              ],
            )
          : Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // CachedNetworkImage(
                //   imageUrl: Domain.domain + categoryModel.icon.substring(6),
                //   width: Responsive.isTablet() ? 72 : null,
                //   height: Responsive.isTablet() ? 72 : null,
                //   fit: Responsive.isTablet() ? BoxFit.fill : null,
                // ).paddingSymmetric(vertical: 10),
                SvgPicture.network(
                  Domain.domain + categoryModel.icon.substring(6),
                  width: Responsive.isTablet() ? 72 : 36,
                  height: Responsive.isTablet() ? 72 : 36,
                ).paddingSymmetric(vertical: 10),
                RegularTextWidget(
                  categoryModel.name,
                  fontSize: Responsive.isTablet() ? 18 : null,
                ),
              ],
            ),
    ).onTap(() {
      categoryController.categoryCardsState.result.clear();
      categoryController.getCategoryCards(
          categoryId: categoryModel.id,
          onConnectionError: (e) {
            Toast.showToast('no_internert_connection'.tr);
          });
      RoutingManager.to(RouteName.categoryDetails, arguments: categoryModel);
    });
  }
}
