import 'dart:developer';

import 'package:auto_route/auto_route.dart';
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 '../../../../../components/button/button.dart';
import '../../../../../components/card/order_menu.dart';
import '../../../../../components/spaces/space.dart';
import '../../../../../components/toast/flushbar.dart';
import '../../../../../router/app_router.gr.dart';
import 'home_right_title.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CheckoutFormBloc, CheckoutFormState>(
      builder: (context, state) {
        final price = state.items.isEmpty
            ? 0.0
            : state.items
                  .map(
                    (e) =>
                        (e.product.price + (e.variant?.priceModifier ?? 0)) *
                        e.quantity,
                  )
                  .reduce((value, element) => value + element);
        log('🛒 Total Price: $price');
        return Align(
          alignment: Alignment.topCenter,
          child: Material(
            color: Colors.white,
            child: Column(
              children: [
                const HomeRightTitle(),
                Padding(
                  padding: const EdgeInsets.all(
                    16.0,
                  ).copyWith(bottom: 0, top: 20),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Item',
                            style: AppStyle.lg.copyWith(
                              color: AppColor.primary,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          const SizedBox(width: 130),
                          SizedBox(
                            width: 50.0,
                            child: Text(
                              'Qty',
                              style: AppStyle.lg.copyWith(
                                color: AppColor.primary,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                          SizedBox(
                            child: Text(
                              'Price',
                              style: AppStyle.lg.copyWith(
                                color: AppColor.primary,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SpaceHeight(8),
                      const Divider(),
                    ],
                  ),
                ),
                Expanded(
                  child: state.items.isEmpty
                      ? const Center(child: Text('No Items'))
                      : ListView.separated(
                          shrinkWrap: true,
                          padding: const EdgeInsets.symmetric(horizontal: 16),
                          itemBuilder: (context, index) =>
                              OrderMenu(data: state.items[index]),
                          separatorBuilder: (context, index) =>
                              const SpaceHeight(1.0),
                          itemCount: state.items.length,
                        ),
                ),

                Padding(
                  padding: const EdgeInsets.all(16.0).copyWith(top: 0),
                  child: Column(
                    children: [
                      const Divider(),
                      const SpaceHeight(16.0),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Pajak',
                            style: AppStyle.md.copyWith(
                              color: AppColor.black,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            '${state.tax} %',
                            style: AppStyle.md.copyWith(
                              color: AppColor.primary,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                      const SpaceHeight(16.0),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Text(
                            'Sub total',
                            style: TextStyle(
                              color: AppColor.black,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            price.currencyFormatRp,
                            style: const TextStyle(
                              color: AppColor.primary,
                              fontWeight: FontWeight.w900,
                            ),
                          ),
                        ],
                      ),
                      const SpaceHeight(16.0),
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: AppElevatedButton.filled(
                          borderRadius: 12,
                          elevation: 1,
                          disabled: state.items.isEmpty,
                          onPressed: () {
                            if (state.orderType.name == 'dineIn' &&
                                state.table == null) {
                              AppFlushbar.showError(
                                context,
                                'Mohon pilih meja terlebih dahulu',
                              );
                              return;
                            }
                            if (state.orderType.name == 'delivery' &&
                                state.delivery == null) {
                              AppFlushbar.showError(
                                context,
                                'Mohon pilih pengiriman terlebih dahulu',
                              );
                              return;
                            }
                            context.router.push(const CheckoutRoute());
                          },
                          label: 'Lanjutkan Pembayaran',
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
