import 'package:adaptix/adaptix.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sapaly_shop/features/widgets/sapaly_app_bar.dart';
import 'package:sapaly_shop/models/category_model.dart';
import 'package:sapaly_shop/models/settings_model.dart';
import 'package:sapaly_shop/features/services/requests.dart';
import 'package:sapaly_shop/themes/app_theme.dart';

class CategoryScreen extends StatefulWidget {
  const CategoryScreen({super.key});

  @override
  State<CategoryScreen> createState() => _CategoryScreenState();
}

class _CategoryScreenState extends State<CategoryScreen> {
  bool hasError = false;
  bool isLoading = true;
  List<CategoryModel> categories = [];
  late String currentLang;

  Future<void> getCategories() async {
    try {
      var list = await API().getCategories();
      if (mounted) {
        setState(() {
          categories = list;
        });
      }
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  void initState() {
    getCategories();
    currentLang = SettingsModel.of(context).currentLanguage;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.lightBackgroundColor,
      appBar: SapalyAppBar(
        hasActionButton: true,
        title: 'categories'.translation,
        badge: '2',
        leadingButton: const Icon(
          Icons.arrow_back,
          color: AppTheme.blackColor,
        ),
        actionButton: SvgPicture.asset('assets/icons/cart.svg'),
        leadingOnTap: () {
          Navigator.of(context).pop();
        },
        actionOnTap: () {},
      ),
      body: categories.isEmpty
          ? const Center(child: CircularProgressIndicator())
          : GridView.builder(
              physics: const BouncingScrollPhysics(),
              padding: EdgeInsets.symmetric(horizontal: 5.adaptedPx()),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 5 / 4,
              ),
              itemCount: categories.length,
              itemBuilder: (context, index) {
                return Container(
                  margin: EdgeInsets.all(10.adaptedPx()),
                  width: 15.adaptedPx(),
                  height: 15.adaptedPx(),
                  child: RawMaterialButton(
                    onPressed: () {},
                    splashColor: AppTheme.lightPrimaryColor.withOpacity(0.1),
                    highlightColor: AppTheme.lightPrimaryColor.withOpacity(0.1),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(25.adaptedPx())),
                    child: Container(
                        width: MediaQuery.of(context).size.width,
                        decoration: BoxDecoration(
                          border: Border.all(
                              color: AppTheme.lightPrimaryColor,
                              width: 2.adaptedPx()),
                          borderRadius: BorderRadius.circular(25.adaptedPx()),
                        ),
                        child: Column(
                          children: [
                            Expanded(
                              flex: 3,
                              child: CachedNetworkImage(
                                imageUrl: categories[index].icon.path,
                                width: MediaQuery.of(context).size.width / 7,
                                fit: BoxFit.contain,
                                progressIndicatorBuilder:
                                    (context, url, progress) => const Center(
                                        child: CircularProgressIndicator()),
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: Text(
                                categories[index].name,
                                maxLines: 3,
                                softWrap: true,
                                textAlign: TextAlign.center,
                                style: Theme.of(context)
                                    .primaryTextTheme
                                    .bodyMedium
                                    ?.copyWith(
                                      fontSize: 15.adaptedPx(),
                                      fontWeight: FontWeight.w600,
                                      color: AppTheme.blackColor,
                                    ),
                              ),
                            ),
                          ],
                        )),
                  ),
                );
              },
            ),
    );
  }
}
