import 'package:common/localization/l10n_utils.dart';
import 'package:concierge/presentation/app/cart_cubit.dart';
import 'package:concierge/presentation/screens/confirm_order/widgets/confirm_order_action_bar.dart';
import 'package:concierge/presentation/screens/confirm_order/widgets/confirm_order_product_list_tile.dart';
import 'package:concierge/presentation/screens/confirm_order/widgets/select_payment_method.dart';
import 'package:concierge/presentation/widgets/bevelled_app_bar.dart';
import 'package:concierge/presentation/widgets/comment_field.dart';
import 'package:concierge/presentation/widgets/padded_column.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:concierge/presentation/screens/confirm_order/bloc/confirm_order_cubit.dart';
import 'package:concierge/presentation/screens/confirm_order/bloc/confirm_order_state.dart';
import 'package:gap/gap.dart';

class ConfirmOrderScreen extends StatelessWidget {
  const ConfirmOrderScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ConfirmOrderCubit, ConfirmOrderState>(
      builder: (context, state) {
        final cubit = context.read<ConfirmOrderCubit>();
        return MultiBlocListener(
          listeners: [
            BlocListener<ConfirmOrderCubit, ConfirmOrderState>(
              listenWhen: (prev, curr) => prev.isLoading && curr.error.isError,
              listener: (context, state) {},
            ),
          ],
          child: Scaffold(
            bottomNavigationBar: ConfirmOrderActionBar(),
            body: Stack(
              children: [
                SingleChildScrollView(
                  child: PaddedColumn(
                    padding: EdgeInsets.symmetric(horizontal: 16),
                    children: [
                      const Gap(100),
                      const Gap(36),
                      Text(context.strings.order_overview, style: TextStyle(fontSize: 20)),
                      const Gap(36),
                      ...buildOrderOverview(context),
                      const Gap(16),
                      ...buildCommentField(context),
                      const Gap(36),
                      Text(context.strings.payment, style: TextStyle(fontSize: 20)),
                      const Gap(16),
                      SelectPaymentMethod(),
                      const Gap(40),
                    ],
                  ),
                ),
                BevelledAppBar(
                  showBack: true,
                  showClose: false,
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Iterable<Widget> buildOrderOverview(BuildContext context) sync* {
    final cartCubit = context.read<CartCubit>();
    yield Divider(color: Colors.grey.shade300);
    for (final product in cartCubit.products) {
      final cartCubit = context.read<CartCubit>();
      final quantity = cartCubit.getQuantity(product.id);
      final price = product.price * quantity;
      yield const Gap(12);
      yield ConfirmOrderProductListTile(
        title: product.title,
        price: price,
        quantity: quantity,
      );
      yield const Gap(12);
      yield Divider(color: Colors.grey.shade300);
    }
    yield Row(
      children: [
        Text(context.strings.total, style: TextStyle(fontSize: 20)),
        Expanded(child: Spacer()),
        Text("${cartCubit.totalPrice} kr.", style: TextStyle(fontSize: 20)),
      ],
    );
    yield Divider(color: Colors.grey.shade300);
  }
}