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

import '../../../app.dart';
import 'widgets/b_s_choose_filter.dart';
import 'widgets/filter_appbar_widget.dart';

class FilterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetX<FilterController>(
      builder: (fc) {
        return Scaffold(
          appBar: FilterAppbarWidget(),
          body: fc.state.isFiltersLoading.value
              ? Center(child: CustomLoader())
              : fc.state.hasError.value
                  ? Center(
                      child: retryBuilder(
                        () => fc.getFilters(),
                      ),
                    )
                  : SingleChildScrollView(
                      child: Column(
                        children: [
                          ListView.builder(
                            shrinkWrap: true,
                            physics: NeverScrollableScrollPhysics(),
                            // separatorBuilder: (context, index) => AppTheme.appColorDivider,
                            itemCount: fc.state.filterModels.length,
                            itemBuilder: (_, index) => FilterCard(
                              model: fc.state.filterModels[index],
                              controller: fc,
                            ),
                          ),

                          // button
                          fc.state.isFiltersLoading.value
                              ? SizedBox.shrink()
                              : Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: ColoredButton(
                                    title: 'done'.tr,
                                    callback: fc.onFilterPageClosed,
                                    btnColor: ThemeColor.mainColor,
                                  ),
                                ),
                        ],
                      ),
                    ),
        );
      },
    );
  }
}

class FilterCard extends StatelessWidget {
  final FilterModel model;
  final FilterController controller;

  FilterCard({required this.model, required this.controller});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        showMaterialModalBottomSheet(
          shape: AppTheme.bottomSheetBorder,
          context: context,
          builder: (context) => BSChooseFilter(
            model: model,
          ),
        );
      },
      splashColor: Theme.of(context).splashColor,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 16),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: Colors.grey.withOpacity(0.50),
                // width: 1.0,
              ),
            ),
          ),
          child: Row(
            children: [
              SizedBox(width: 8),
              Expanded(
                child: Text(
                  model.name,
                  style: new TextStyle(
                    color: Colors.black,
                    fontSize: 16.sp,
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              // Spacer(),
              Expanded(
                child: (model.selectedOptions.isNotEmpty || controller.state.selectedPriceFilter.value != null)
                    ? _printSubCategory()
                    : SizedBox.shrink(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _printSubCategory() {
    // const int TOTAL_COUNT = 4;
    List<Widget> list = [];

    if (model.code == 'price' && controller.state.selectedPriceFilter.value != null) {
      list.add(_addText(controller.state.selectedPriceFilter.value!.label));
    } else {
      final length = model.selectedOptions.length;

      for (int i = 0; i < length; i++) {
        final String name = model.selectedOptions[i].label;
        list.add(_addText(i != length - 1 ? name + ', ' : name));
      }
    }

    // if (model.selectedOptions.length > length) {
    //   list.add(_addText('...'));
    // }

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      // reverse: true,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: list,
      ),
    );
  }

  Widget _addText(String text) {
    return Text(
      text,
      style: new TextStyle(
        color: Colors.black,
        fontSize: 14.sp,
      ),
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    );
  }
}


/*
,
*/