import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:outbag_app/backend/request.dart';
import 'package:outbag_app/backend/room.dart';
import 'package:outbag_app/backend/user.dart';
import 'package:routemaster/routemaster.dart';

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

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

class _JoinRoomPageState extends State {
  List<Room> rooms = [];

  @override
  void initState() {
    super.initState();
    (() async {
        User user;
        try {
          user = await User.fromDisk();
        } catch (_) {
          return;
        }

        try {
          final resp = await postWithCreadentials(
            path: 'listPublicRooms',
            credentials: user,
            target: user.server,
            body: {});
          if (resp.res == Result.ok) {
            // parse rooms
            final List<Room> list = resp.body['data'].map<Room>((json) {
                return Room.fromJSON(json);
            }).toList();
            setState(() {
                rooms = list;
            });
          } else {
            throw Error();
          }
        } catch (_) {
          // network error
          // unable to load room list
          // NOTE: might want to show snackbar
          // with warning
        }
    })();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Join Room'),
        leading: IconButton(
          onPressed: () {
            // go back
            Routemaster.of(context).history.back();
          },
          icon: const Icon(Icons.arrow_back),
          tooltip: "Go back",
        ),
      ),
      body: ListView.builder(
        itemCount: rooms.length,
        itemBuilder: (ctx, i) {
          final room = rooms[i];
          return Card(
            margin: const EdgeInsets.all(8.0),
            clipBehavior: Clip.antiAliasWithSaveLayer,
            semanticContainer: true,
            child: InkWell(
              onTap: () {
                // TODO: show modalBottomSheet
                // with room information
                // and join button
              },
              child: Container(
                padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
                child: ListTile(
                  title: Text(room.name),
                  visualDensity: const VisualDensity(vertical: 3),
                  subtitle: Text(room.description),
                  leading: AspectRatio(
                    aspectRatio: 1 / 1,
                    child: SvgPicture.asset("${room.icon?.img}"),
                  ),
                  hoverColor: Colors.transparent,
          ))));
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        label: const Text('New'),
        icon: const Icon(Icons.add),
        onPressed: () {
          // create new room
          Routemaster.of(context).push("/new-room");
        },
        tooltip: 'Create Room',
      ),
    );
  }
}