import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../app/app.dart';
import '../controller.dart';

class CategoriesWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<CategoryController>(
      init: CategoryController(),
      builder: (cc) => Obx(
        () {
          if (cc.state.isLoading.value) {
            return Expanded(
              child: Center(
                child: CustomLoader(),
              ),
            );
          }

          if (cc.state.hasError.value) {
            return Expanded(
              child: Center(
                child: retryBuilder(() => cc.fetchCategories()),
              ),
            );
          }

          if (cc.state.categories.isEmpty) {
            return Expanded(
              child: Center(
                child: ItemNotFoundWidget(),
              ),
            );
          }
          return Expanded(
            child: ListView.builder(
              padding: EdgeInsets.only(left: 16.w, right: 16.w),
              itemCount: cc.state.categories.length,
              itemBuilder: (_, index) => CategoryItem(
                cc.state.categories[index],
                cc,
              ),
            ),
          );
        },
      ),
    );
  }
}

// Displays one Entry. If the entry has children then it's displayed
// with an ExpansionTile.
class CategoryItem extends StatelessWidget {
  const CategoryItem(this.category, this.cc);

  final CategoryModel category;
  final CategoryController cc;

  Widget _buildTiles(CategoryModel root) {
    return Container(
      decoration: root.parentId == 1 // if model has parent 1, it is level 1 category
          ? new BoxDecoration(
              border: new Border(
                bottom: new BorderSide(
                  color: ThemeColor.black.withAlpha(24),
                ),
              ),
            )
          : null,
      child: root.children.isEmpty
          ? new ListTile(
              // contentPadding: EdgeInsets.symmetric(horizontal: 16.h),
              leading: _getTileLeading(root.iconPath),
              title: _getTileTitle(root.name),
              onTap: () => cc.navigateToProducts(root),
            )
          : new ExpansionTile(
              childrenPadding: EdgeInsets.symmetric(horizontal: 12.h),
              key: new PageStorageKey<CategoryModel>(root),
              leading: _getTileLeading(root.iconPath),
              title: GestureDetector(
                onTap: () => cc.navigateToProducts(root),
                child: _getTileTitle(root.name),
              ),
              children: root.children.map(_buildTiles).toList(),
            ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.h),
      child: Theme(
        data: Theme.of(context).copyWith(
          unselectedWidgetColor: Colors.black,
          colorScheme: ColorScheme.light(primary: Colors.black),
          dividerColor: ThemeColor.black.withAlpha(24),
        ),
        child: ListTileTheme(
          contentPadding: EdgeInsets.zero,
          child: _buildTiles(category),
        ),
      ),
    );
  }

  Widget _getTileTitle(String text) {
    return Text(
      text,
      style: new TextStyle(
        color: ThemeColor.black,
        fontSize: 16.sp,
      ),
    );
  }

  Widget _getTileLeading(String imageUrl) {
    return Container(
      // margin: const EdgeInsets.only(top: 4, bottom: 4),
      child: cachedImageNetwork(
        imageUrl,
        BoxFit.fill,
        const BorderRadius.all(Radius.circular(6.0)),
        50.w,
        40.h,
      ),
    );
  }
}
