import 'package:enaklo_pos/presentation/table/dialogs/form_table_new_dialog.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:enaklo_pos/core/components/components.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:enaklo_pos/presentation/table/blocs/change_position_table/change_position_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/create_table/create_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/get_table/get_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/widgets/table_widget.dart';

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

  @override
  State<TableManagementScreen> createState() => _TableManagementScreenState();
}

class _TableManagementScreenState extends State<TableManagementScreen> {
  TextEditingController? tableNameController;

  @override
  void initState() {
    context.read<GetTableBloc>().add(const GetTableEvent.getTables());
    tableNameController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    tableNameController!.dispose();
    super.dispose();
  }

  @override
  Widget build(
    BuildContext context,
  ) {
    // final tables = ref.watch(tableProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('Table Layout',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
        // leading: Icon(Icons.arrow_back),
        backgroundColor: AppColors.white,
        actions: [
          BlocListener<CreateTableBloc, CreateTableState>(
            listener: (context, state) {
              state.maybeWhen(
                  orElse: () {},
                  success: (message) {
                    context
                        .read<GetTableBloc>()
                        .add(const GetTableEvent.getTables());
                  });
            },
            child: IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                // show dialaog adn input table name
                showDialog(
                  context: context,
                  builder: (context) => FormTableNewDialog(),
                );
              },
            ),
          ),
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {
              // Handle delete action
            },
          ),
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () {
              // Handle delete action
            },
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {
              // Handle delete action
            },
          ),
          SpaceWidth(16),
        ],
      ),
      body: BlocBuilder<GetTableBloc, GetTableState>(
        builder: (context, state) {
          return state.maybeWhen(orElse: () {
            return Container();
          }, success: (tables) {
            return Stack(
              children: tables.map((table) {
                return Positioned(
                  left: (table.positionX ?? 0) - 116,
                  top: (table.positionY ?? 0) - 80,
                  child: BlocListener<ChangePositionTableBloc,
                      ChangePositionTableState>(
                    listener: (context, state) {
                      state.maybeWhen(
                          orElse: () {},
                          success: (message) {
                            context
                                .read<GetTableBloc>()
                                .add(const GetTableEvent.getTables());
                          });
                    },
                    child: Draggable(
                      feedback: TableWidget(table: table),
                      childWhenDragging: SizedBox.shrink(),
                      onDragEnd: (details) {
                        // context
                        //     .read<ChangePositionTableBloc>()
                        //     .add(ChangePositionTableEvent.changePositionTable(
                        //       tableId: table.id,
                        //       position: details.offset,
                        //     ));
                      },
                      child: TableWidget(table: table),
                    ),
                  ),
                );
              }).toList(),
            );
          });
        },
      ),
      // floatingActionButton: FloatingActionButton(
      //   onPressed: () => ref.read(tableProvider.notifier).addTable(),
      //   child: Icon(Icons.add),
      // ),
    );
  }
}