import 'package:enaklo_pos/core/components/buttons.dart';
import 'package:enaklo_pos/core/components/custom_modal_dialog.dart';
import 'package:enaklo_pos/core/components/spaces.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:enaklo_pos/data/models/response/table_model.dart';
import 'package:enaklo_pos/presentation/home/bloc/get_table_status/get_table_status_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class PaymentAddOrderDialog extends StatefulWidget {
  const PaymentAddOrderDialog({super.key});

  @override
  State<PaymentAddOrderDialog> createState() => _PaymentAddOrderDialogState();
}

class _PaymentAddOrderDialogState extends State<PaymentAddOrderDialog> {
  TableModel? selectTable;

  @override
  Widget build(BuildContext context) {
    return CustomModalDialog(
      title: 'Tambah Pesanan',
      subtitle: 'Silahkan tambahkan pesanan',
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
      minWidth: context.deviceWidth * 0.4,
      minHeight: context.deviceHeight * 0.4,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Pilih Meja yang Sudah Ada Pesanan',
                style: TextStyle(
                  color: AppColors.black,
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SpaceHeight(12.0),
              BlocBuilder<GetTableStatusBloc, GetTableStatusState>(
                  builder: (context, state) {
                return state.maybeWhen(
                  orElse: () => const CircularProgressIndicator(),
                  success: (tables) {
                    print(
                        "🔘 Add to Order - Tables fetched: ${tables.length} tables");
                    print(
                        "🔘 Add to Order - Table statuses: ${tables.map((t) => '${t.tableName}: ${t.status}').join(', ')}");
                    // No need to filter since we're fetching occupied tables directly
                    final occupiedTables = tables;

                    if (selectTable == null && occupiedTables.isNotEmpty) {
                      selectTable = occupiedTables.first;
                    }

                    return Container(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(
                          color: Theme.of(context).primaryColor,
                          width: 2,
                        ),
                      ),
                      child: DropdownButtonHideUnderline(
                        child: DropdownButton<TableModel>(
                          isExpanded: true,
                          value: selectTable,
                          onChanged: (TableModel? newValue) {
                            setState(() {
                              selectTable = newValue;
                            });
                          },
                          items: occupiedTables
                              .map<DropdownMenuItem<TableModel>>(
                                (TableModel value) =>
                                    DropdownMenuItem<TableModel>(
                                  value: value,
                                  child: Text('${value.tableName} (Occupied)'),
                                ),
                              )
                              .toList(),
                        ),
                      ),
                    );
                  },
                );
              }),
            ],
          ),
          SpaceHeight(24),
          Button.filled(
            onPressed: () {},
            label: "Simpan",
          ),
        ],
      ),
    );
  }
}