import 'package:flutter/material.dart';

import '../../helper/helper.dart';
import '../../helper/widget/style.dart';
import '../../models/filter_menu.dart';

class FavGridMenu extends StatelessWidget {
  const FavGridMenu({
    Key? key,
    required this.categoryFavAfterSelect,
    required this.widthGrid,
    required this.paddingLeftRigthGrid,
    required this.i,
  }) : super(key: key);

  final List<FilterMenu> categoryFavAfterSelect;
  final double widthGrid;
  final double paddingLeftRigthGrid;
  final int i;

  @override
  Widget build(BuildContext context) {
    bool addCondition = false;
    return Container(
      margin: EdgeInsets.only(
        left: (i == 0) ? 0 : 8, // paling awal gausah dikasih margin
        right: (i == categoryFavAfterSelect.length - 1)
            ? 0
            : 8, // paling akhir gausah dikasi margin
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        color: gridCardBackgroundColor,
      ),
      height: double.infinity,
      width: widthGrid,
      child: Container(
        margin: EdgeInsets.only(
          top: 8,
          left: paddingLeftRigthGrid,
          right: paddingLeftRigthGrid,
          bottom: 16,
        ),
        // color: Colors.red,
        child: Column(
          children: [
            Container(
              width: widthGrid - (2 * paddingLeftRigthGrid),
              height: widthGrid - (2 * paddingLeftRigthGrid),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                // color: Colors.red,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image(
                  fit: BoxFit.fill,
                  image: NetworkImage(categoryFavAfterSelect[i].imageUrlMedium),
                ),
              ),
            ),
            const SizedBox(
              height: 3,
            ),
            Container(
              width: widthGrid - (2 * paddingLeftRigthGrid),
              height: 28,
              // color: Colors.blue,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Expanded(
                    child: defaultText(
                      context,
                      categoryFavAfterSelect[i].name,
                      maxLines: 2,
                      overFlow: TextOverflow.ellipsis,
                      style: menuNameGridFav(),
                    ),
                  ),
                  Container(
                    width: 40,
                    child: defaultText(
                      context,
                      'Rp ${formatNumber().format(amountParseToInt(categoryFavAfterSelect[i].price))}',
                      maxLines: 3,
                      overFlow: TextOverflow.ellipsis,
                      style: menuPriceGridFav(),
                    ),
                  )
                ],
              ),
            ),
            const SizedBox(
              height: 16,
            ),
            (addCondition)
                ? Container(
                    height: 30,
                    width: widthGrid - (2 * paddingLeftRigthGrid),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(6),
                      color: buttonColor,
                    ),
                    child: Center(
                      child: defaultText(
                        context,
                        'Tambah',
                        style: addButtonGridFav(),
                      ),
                    ),
                  )
                : Container(
                    height: 30,
                    width: widthGrid - (2 * paddingLeftRigthGrid),
                    child: Row(
                      children: [
                        Container(
                          width: 27,
                          height: 24,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: buttonColor,
                          ),
                          child: const Center(
                            child: Image(
                              width: 13.33,
                              height: 13.33,
                              color: textInButton,
                              image: AssetImage('assets/icons/note.png'),
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        Container(
                          width: 22,
                          height: 22,
                          child: const Image(
                            image: AssetImage('assets/icons/minus.png'),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: defaultText(
                              context,
                              '10',
                              style: amountGridFav(),
                            ),
                          ),
                        ),
                        Container(
                          width: 22,
                          height: 22,
                          child: const Image(
                            image: AssetImage('assets/icons/plus.png'),
                          ),
                        )
                      ],
                    ),
                  )
          ],
        ),
      ),
    );
  }
}
