// ignore_for_file: must_be_immutable

import 'package:byod/helper/widget/plus_minus_button.dart';
import 'package:byod/helper/widget/style.dart';
import 'package:flutter/material.dart';

import '../../helper/helper.dart';
import '../../helper/widget/button_modal.dart';
import '../../models/orders.dart';
import '../../models/variant_categories.dart';

class CustomizeVariantNew extends StatelessWidget {
  CustomizeVariantNew({
    super.key,
    required this.orders,
    required this.variantCat,
  });

  Orders orders;
  List<VariantCategories> variantCat;

  @override
  Widget build(BuildContext context) {
    void minus() {}
    void plus() {}
    double widthScreen = responsiveWidthScreen(context);
    return Container(
      // width: widthScreen,
      height: MediaQuery.of(context).size.height * 0.8,
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(19),
          topRight: Radius.circular(19),
        ),
        color: backgroundWhite,
      ),
      child: Stack(
        children: [
          Container(
            padding: const EdgeInsets.symmetric(horizontal: paddingLeftRight),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(
                  height: 8,
                ),
                Center(
                  child: Container(
                    width: 50,
                    height: 3,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(7),
                      color: disabledColor,
                    ),
                  ),
                ),
                const SizedBox(
                  height: 28,
                ),
                defaultText(
                  context,
                  'Nasi Ayam Kecap + Telur',
                  maxLines: 2,
                  overFlow: TextOverflow.ellipsis,
                  style: textStyleVariantModal(
                    font: 20,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(
                  height: 12,
                ),
                Expanded(
                  child: ListView.builder(
                      itemCount: 10,
                      itemBuilder: (context, i) {
                        return Column(
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      padding: const EdgeInsets.only(bottom: 8),
                                      child: defaultText(
                                        context,
                                        '2 X 25,000',
                                        maxLines: 1,
                                        overFlow: TextOverflow.ellipsis,
                                        style: textStyleVariantModal(),
                                      ),
                                    ),
                                    Column(
                                      mainAxisSize: MainAxisSize.min,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        for (int d = 0; d < 3; d++)
                                          defaultText(
                                            context,
                                            'Pedas ke $d',
                                            maxLines: 1,
                                            overFlow: TextOverflow.ellipsis,
                                          )
                                      ],
                                    ),
                                    Container(
                                      padding: const EdgeInsets.only(
                                        bottom: 8,
                                        top: 8,
                                      ),
                                      child: defaultText(
                                        context,
                                        'Catatan: catatan....',
                                        maxLines: 3,
                                        overFlow: TextOverflow.ellipsis,
                                        style: textStyleVariantModal(),
                                      ),
                                    ),
                                  ],
                                ),
                                PlusMinusButton(
                                  initialValue: 1,
                                  minus: minus,
                                  plus: plus,
                                )
                              ],
                            ),
                            const SizedBox(
                              height: 12,
                            ),
                            const Divider(
                              thickness: 1,
                              height: 1,
                              color: dividerGrey,
                            ),
                            const SizedBox(
                              height: 16,
                            ),
                          ],
                        );
                      }),
                )
              ],
            ),
          ),
          Positioned(
            bottom: 0,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: paddingLeftRight),
              height: 43,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                color: buttonColor,
                borderRadius: BorderRadius.circular(48),
              ),
              child: Center(
                child: defaultText(
                  context,
                  'Tambah Variant',
                  style: addButton(),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}
// Positioned(
//           bottom: 0,
//           child: ButtonComponent(
//               buttonColor: buttonColor, teksButton: 'Tambah Variant'),
//         )