import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:enaklo_pos/core/constants/variables.dart';
import 'package:enaklo_pos/core/extensions/int_ext.dart';
import 'package:enaklo_pos/presentation/home/bloc/checkout/checkout_bloc.dart';
import 'package:enaklo_pos/presentation/home/models/product_quantity.dart';

import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart';

class OrderMenu extends StatefulWidget {
  final ProductQuantity data;
  const OrderMenu({super.key, required this.data});

  @override
  State<OrderMenu> createState() => _OrderMenuState();
}

class _OrderMenuState extends State<OrderMenu> {
  final _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.text = widget.data.notes;

    _controller.addListener(() {
      context.read<CheckoutBloc>().add(
            CheckoutEvent.updateItemNotes(
              widget.data.product,
              _controller.text,
            ),
          );
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Flexible(
              child: ListTile(
                contentPadding: EdgeInsets.zero,
                leading: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                  child:
                      // Icon(
                      //   Icons.fastfood,
                      //   size: 50,
                      //   color: AppColors.primary,
                      // ),
                      CachedNetworkImage(
                    imageUrl: (widget.data.product.imageUrl ?? '')
                            .contains('http')
                        ? widget.data.product.imageUrl!
                        : '${Variables.baseUrl}/${widget.data.product.imageUrl}',
                    width: 50.0,
                    height: 50.0,
                    fit: BoxFit.cover,
                    errorWidget: (context, url, error) => Container(
                      width: 50.0,
                      height: 50.0,
                      decoration: BoxDecoration(
                        color: AppColors.disabled.withOpacity(0.4),
                      ),
                      child: const Icon(
                        Icons.image,
                        color: AppColors.grey,
                      ),
                    ),
                  ),
                ),
                title: Row(
                  children: [
                    Expanded(
                      child: Text(widget.data.product.name ?? "-",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                          )),
                    ),
                  ],
                ),
                subtitle: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text((widget.data.product.price! +
                            (widget.data.variant?.priceModifier ?? 0))
                        .currencyFormatRp),
                    if (widget.data.variant != null)
                      Text(widget.data.variant?.name ?? ""),
                  ],
                ),
              ),
            ),
            Row(
              children: [
                GestureDetector(
                  onTap: () {
                    context.read<CheckoutBloc>().add(CheckoutEvent.removeItem(
                        widget.data.product, widget.data.variant));
                  },
                  child: Container(
                    width: 30,
                    height: 30,
                    color: AppColors.white,
                    child: const Icon(
                      Icons.remove_circle,
                      color: AppColors.primary,
                    ),
                  ),
                ),
                SizedBox(
                  width: 30.0,
                  child: Center(
                      child: Text(
                    widget.data.quantity.toString(),
                  )),
                ),
                GestureDetector(
                  onTap: () {
                    context.read<CheckoutBloc>().add(
                          CheckoutEvent.addItem(
                            widget.data.product,
                            widget.data.variant,
                          ),
                        );
                  },
                  child: Container(
                    width: 30,
                    height: 30,
                    color: AppColors.white,
                    child: const Icon(
                      Icons.add_circle,
                      color: AppColors.primary,
                    ),
                  ),
                ),
              ],
            ),
            const SpaceWidth(8),
            SizedBox(
              width: 80.0,
              child: Text(
                (widget.data.product.price! * widget.data.quantity +
                        (widget.data.variant?.priceModifier ?? 0))
                    .currencyFormatRp,
                textAlign: TextAlign.right,
                style: const TextStyle(
                  color: AppColors.primary,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
        SpaceHeight(8.0),
        SizedBox(
          height: 40,
          child: Row(
            children: [
              Flexible(
                child: TextFormField(
                  cursorColor: AppColors.primary,
                  controller: _controller,
                  style: const TextStyle(
                    fontSize: 12,
                    color: AppColors.black,
                  ),
                  decoration: InputDecoration(
                    hintText: 'Catatan Pesanan',
                  ),
                ),
              ),
              const SpaceWidth(16.0),
              GestureDetector(
                onTap: () {
                  context.read<CheckoutBloc>().add(
                        CheckoutEvent.deleteItem(
                          widget.data.product,
                          widget.data.variant,
                        ),
                      );
                },
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                    color: AppColors.primary,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Icon(
                    Icons.delete_outline,
                    color: AppColors.white,
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}