import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../application/checkout/checkout_form/checkout_form_bloc.dart';
import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../../../domain/product/product.dart';
import '../image/image.dart';
import '../spaces/space.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<CheckoutFormBloc>().add(
        CheckoutFormEvent.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: AppNetworkImage(
                    url: widget.data.product.imageUrl,
                    width: 50.0,
                    height: 50.0,
                    fit: BoxFit.cover,
                  ),
                ),
                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<CheckoutFormBloc>().add(
                      CheckoutFormEvent.removeItem(
                        widget.data.product,
                        widget.data.variant,
                      ),
                    );
                  },
                  child: Container(
                    width: 30,
                    height: 30,
                    color: AppColor.white,
                    child: const Icon(
                      Icons.remove_circle,
                      color: AppColor.primary,
                    ),
                  ),
                ),
                SizedBox(
                  width: 30.0,
                  child: Center(child: Text(widget.data.quantity.toString())),
                ),
                GestureDetector(
                  onTap: () {
                    context.read<CheckoutFormBloc>().add(
                      CheckoutFormEvent.addItem(
                        widget.data.product,
                        widget.data.variant,
                      ),
                    );
                  },
                  child: Container(
                    width: 30,
                    height: 30,
                    color: AppColor.white,
                    child: const Icon(
                      Icons.add_circle,
                      color: AppColor.primary,
                    ),
                  ),
                ),
              ],
            ),
            const SpaceWidth(8),
            SizedBox(
              width: 80.0,
              child: Text(
                ((widget.data.product.price +
                            (widget.data.variant?.priceModifier ?? 0)) *
                        widget.data.quantity)
                    .currencyFormatRp,
                textAlign: TextAlign.right,
                style: const TextStyle(
                  color: AppColor.primary,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}