apskel-pos-flutter-v2/lib/presentation/components/dialog/table/table_transfer_dialog.dart

import 'dart:developer';

import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../application/table/table_form/table_form_bloc.dart';
import '../../../../application/table/table_loader/table_loader_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/table/table.dart' as t;
import '../../button/button.dart';
import '../../loader/loader_with_text.dart';
import '../../spaces/space.dart';
import '../../toast/flushbar.dart';
import '../dialog.dart';

class TableTransferDialog extends StatefulWidget {
  final t.Table fromTable;
  const TableTransferDialog({super.key, required this.fromTable});

  @override
  State<TableTransferDialog> createState() => _TableTransferDialogState();
}

class _TableTransferDialogState extends State<TableTransferDialog> {
  t.Table? selectTable;

  @override
  void initState() {
    super.initState();
    context.read<TableLoaderBloc>().add(
      TableLoaderEvent.fetched(isRefresh: true, status: 'available'),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomModalDialog(
      title: 'Transfer Meja',
      subtitle: 'Pilih meja yang tersedia',
      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: [
              Text(
                'Pilih Meja',
                style: AppStyle.lg.copyWith(fontWeight: FontWeight.w600),
              ),
              const SpaceHeight(6.0),
              BlocBuilder<TableLoaderBloc, TableLoaderState>(
                builder: (context, state) {
                  final availableTables = state.tables;

                  if (state.isFetching) {
                    return Center(child: const LoaderWithText());
                  }

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

                  if (availableTables.isEmpty) {
                    return Container(
                      padding: const EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        color: Colors.orange[50],
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(color: Colors.orange, width: 1),
                      ),
                      child: const Text(
                        'Tidak ada meja yang tersedia. Silakan pilih opsi lain.',
                        style: TextStyle(color: Colors.orange),
                      ),
                    );
                  }

                  return DropdownSearch<t.Table>(
                    items: state.tables,
                    selectedItem: selectTable,
                    dropdownDecoratorProps: DropDownDecoratorProps(
                      dropdownSearchDecoration: InputDecoration(
                        hintText: "Pilih meja",
                        hintStyle: TextStyle(
                          color: Colors.grey.shade600,
                          fontSize: 14,
                        ),
                        prefixIcon: Icon(
                          Icons.category_outlined,
                          color: Colors.grey.shade500,
                          size: 20,
                        ),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: BorderSide(
                            color: Colors.grey.shade300,
                            width: 1.5,
                          ),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: BorderSide(
                            color: Colors.grey.shade300,
                            width: 1.5,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: BorderSide(
                            color: Colors.blue.shade400,
                            width: 2,
                          ),
                        ),
                        filled: true,
                        fillColor: Colors.white,
                        contentPadding: const EdgeInsets.symmetric(
                          horizontal: 16,
                          vertical: 16,
                        ),
                      ),
                    ),
                    popupProps: PopupProps.menu(
                      showSearchBox: true,
                      searchFieldProps: TextFieldProps(
                        decoration: InputDecoration(
                          hintText: "Cari meja...",
                          prefixIcon: const Icon(Icons.search),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 12,
                          ),
                        ),
                      ),
                      menuProps: MenuProps(
                        backgroundColor: Colors.white,
                        elevation: 8,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                      itemBuilder: (context, category, isSelected) {
                        return Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 12,
                          ),
                          decoration: BoxDecoration(
                            color: isSelected
                                ? Colors.blue.shade50
                                : Colors.transparent,
                            border: Border(
                              bottom: BorderSide(
                                color: Colors.grey.shade100,
                                width: 0.5,
                              ),
                            ),
                          ),
                          child: Row(
                            children: [
                              Container(
                                width: 8,
                                height: 8,
                                decoration: BoxDecoration(
                                  color: isSelected
                                      ? Colors.blue.shade600
                                      : Colors.grey.shade400,
                                  shape: BoxShape.circle,
                                ),
                              ),
                              const SizedBox(width: 12),
                              Expanded(
                                child: Text(
                                  category.tableName,
                                  style: TextStyle(
                                    fontSize: 14,
                                    fontWeight: isSelected
                                        ? FontWeight.w600
                                        : FontWeight.w500,
                                    color: isSelected
                                        ? Colors.blue.shade700
                                        : Colors.black87,
                                  ),
                                ),
                              ),
                              if (isSelected)
                                Icon(
                                  Icons.check,
                                  color: Colors.blue.shade600,
                                  size: 18,
                                ),
                            ],
                          ),
                        );
                      },
                      emptyBuilder: (context, searchEntry) {
                        return Container(
                          padding: const EdgeInsets.all(20),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                Icons.search_off,
                                color: Colors.grey.shade400,
                                size: 48,
                              ),
                              const SizedBox(height: 12),
                              Text(
                                searchEntry.isEmpty
                                    ? "Tidak ada meja tersedia"
                                    : "Tidak ditemukan meja dengan '$searchEntry'",
                                style: TextStyle(
                                  color: Colors.grey.shade600,
                                  fontSize: 14,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                    itemAsString: (t.Table table) => table.tableName,
                    compareFn: (t.Table? item1, t.Table? item2) {
                      return item1?.id == item2?.id;
                    },
                    onChanged: (t.Table? selectedTable) {
                      if (selectedTable != null) {
                        setState(() {
                          selectTable = selectedTable;
                        });
                        log("selectTable: ${selectTable!.tableName}");
                      }
                    },
                    validator: (t.Table? value) {
                      if (value == null) {
                        return "Meja harus dipilih";
                      }
                      return null;
                    },
                  );
                },
              ),
            ],
          ),
          SpaceHeight(24),
          BlocBuilder<TableFormBloc, TableFormState>(
            builder: (context, state) {
              return AppElevatedButton.filled(
                onPressed: () {
                  if (selectTable == null) {
                    AppFlushbar.showError(
                      context,
                      'Silahkan Pilih Meja Tujuan',
                    );
                    return;
                  }

                  context.read<TableFormBloc>().add(
                    TableFormEvent.transfer(
                      fromTableId: widget.fromTable.id,
                      toTableId: selectTable!.id,
                    ),
                  );
                },
                label: "Transfer",
                isLoading: state.isTransfering,
              );
            },
          ),
        ],
      ),
    );
  }
}