SortingPage

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:module_category/presentation/bloc/category_product_list/category_product_list_bloc.dart';
import 'package:module_core/utils/app_colors.dart';

class CategorySortingPage extends StatefulWidget {
  final String? slug;
  const CategorySortingPage(this.slug);

  @override
  State<CategorySortingPage> createState() => _CategorySortingPageState();
}

class _CategorySortingPageState extends State<CategorySortingPage>
    with AutomaticKeepAliveClientMixin {
  int _isSelected = 0;

  @override
  // ignore: must_call_super
  Widget build(BuildContext context) {
    List<Map<String, dynamic>> _value = [
      {
        'name': 'Paling Sesuai',
        'value': '',
      },
      {
        'name': 'Terbaru',
        'value': 'newest',
      },
      {
        'name': 'Terlaris',
        'value': 'review',
      },
      {
        'name': 'Termurah',
        'value': 'min_price',
      },
      {
        'name': 'Termahal',
        'value': 'max_price',
      },
      {
        'name': 'Dilihat Terbanyak',
        'value': 'view',
      },
    ];

    return Container(
      height: 475,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  height: 4,
                  width: 150,
                  decoration: BoxDecoration(
                    color: Colors.grey[400],
                    borderRadius: BorderRadius.circular(4),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 8.0, top: 8),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: Icon(
                          Icons.close,
                          color: Color(0xffAEAFB2),
                          size: 24,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            SizedBox(height: 16),
            Text(
              'Urutkan',
              textAlign: TextAlign.center,
              style: GoogleFonts.poppins(
                fontSize: 16,
                fontWeight: FontWeight.w600,
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 16, bottom: 8),
              height: 1,
              width: MediaQuery.of(context).size.width,
              color: Color(0xffC4C4C4),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 20, vertical: 4),
              height: 325,
              child: ListView.builder(
                itemCount: _value.length,
                itemBuilder: (context, index) {
                  return ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: _isSelected == index
                          ? AppColors.orangeLight
                          : Colors.white,
                      onPrimary: AppColors.orangeLight,
                      elevation: 0,
                      shape: RoundedRectangleBorder(
                        borderRadius: new BorderRadius.circular(30.0),
                      ),
                    ),
                    onPressed: () => {
                      if (index == 0)
                        {
                          Navigator.pop(context),
                        }
                      else
                        {
                          setState(() {
                            _isSelected = index;
                          }),
                          context.read<CategoryProductListBloc>().add(
                                FetchCategoryProductListSorting(
                                  widget.slug ?? 'slug-category',
                                  _value[index]['value'],
                                ),
                              ),
                          Navigator.pop(context)
                        }
                    },
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            _value[index]['name'],
                            textAlign: TextAlign.start,
                            style: GoogleFonts.roboto(
                                color: const Color(0xFF2D2F2E),
                                fontWeight: FontWeight.w400,
                                fontSize: 14),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;

  @override
  void dispose() {
    super.dispose();
  }
}