import 'package:flutter/material.dart';
import 'package:outbag_app/backend/request.dart';
import 'package:outbag_app/backend/room.dart';
import 'package:outbag_app/backend/user.dart';
import 'package:outbag_app/tools/fetch_wrapper.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:provider/provider.dart';

class RoomCategoriesPage extends StatefulWidget {
  final RoomInfo? info;
  final Room? room;

  const RoomCategoriesPage(this.room, this.info, {super.key});

  @override
  State<StatefulWidget> createState() => _RoomCategoriesPageState();
}

class _RoomCategoriesPageState extends State<RoomCategoriesPage> {
  List<RoomCategory> list = [];

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
        fetchCategories();
    });
  }

  void fetchCategories() async {
    final user = context.read<User>();

    // TODO: load cached rooms

    doNetworkRequest(ScaffoldMessenger.of(context),
      req: () => postWithCreadentials(
        credentials: user,
        target: user.server,
        path: 'getCategories',
        body: {'room': widget.room?.id, 'server': widget.room?.serverTag}),
      onOK: (json) {
        final resp = json['data']
        .map<RoomCategory>((raw) => RoomCategory.fromJSON(raw))
        .toList();
        setState(() {
            list = resp;
        });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReorderableListView.builder(
        itemBuilder: (context, index) {
          final item = list[index];

          return ListTile(
            key: Key('cat-${item.id}'),
            leading: Icon(Icons.square_rounded, color: item.color),
            title: Text(item.name),
            onTap: () {
              // TODO show edit category popup
              // NOTE: maybe use ModalBottomSheet
              // and show delete button in there
            },
          );
        },
        itemCount: list.length,
        onReorder: (int start, int current) {},
      ),
      floatingActionButton: FloatingActionButton.extended(
        icon: const Icon(Icons.add),
        label: Text(AppLocalizations.of(context)!.newCategoryShort),
        tooltip: AppLocalizations.of(context)!.newCategoryLong,
        onPressed: () {
          // TODO show new category popup
        },
      ),
    );
  }
}