import 'package:Envelope/models/conversation_users.dart';
import 'package:flutter/material.dart';
import '/views/main/conversation_settings_user_list_item.dart';
import '/models/conversations.dart';
import 'package:Envelope/components/custom_circle_avatar.dart';

class ConversationSettings extends StatefulWidget {
  final Conversation conversation;
  const ConversationSettings({
    Key? key,
    required this.conversation,
  }) : super(key: key);

  @override
  State<ConversationSettings> createState() => _ConversationSettingsState();
}

class _ConversationSettingsState extends State<ConversationSettings> {
  final _formKey = GlobalKey<FormState>();

  List<ConversationUser> users = [];

  TextEditingController nameController = TextEditingController();

  @override
  void initState() {
    nameController.text = widget.conversation.name;
    super.initState();
    getUsers();
  }

  Future<void> getUsers() async {
    users = await getConversationUsers(widget.conversation);
    setState(() {});
  }

  Widget conversationName() {
    return Row(
        children: <Widget> [
          const CustomCircleAvatar(
              icon: Icon(Icons.people, size: 40),
              imagePath: null, // TODO: Add image here
              radius: 30,
          ),
          const SizedBox(width: 10),
          Text(
              widget.conversation.name,
              style: const TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.w500,
              ),
          ),
        ],
    );
  }

  Widget usersList() {
    return ListView.builder(
        itemCount: users.length,
        shrinkWrap: true,
        padding: const EdgeInsets.only(top: 16),
        itemBuilder: (context, i) {
          return ConversationSettingsUserListItem(
              user: users[i],
              isAdmin: widget.conversation.admin,
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            elevation: 0,
            automaticallyImplyLeading: false,
            flexibleSpace: SafeArea(
                child: Container(
                    padding: const EdgeInsets.only(right: 16),
                    child: Row(
                        children: <Widget>[
                          IconButton(
                              onPressed: (){
                                Navigator.pop(context);
                              },
                              icon: const Icon(Icons.arrow_back),
                          ),
                          const SizedBox(width: 2,),
                          Expanded(
                              child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text(
                                        widget.conversation.name + " Settings",
                                        style: const TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.w600
                                        ),
                                    ),
                                  ],
                              ),
                          ),
                        ],
                    ),
                ),
          ),
        ),
        body: Padding(
            padding: const EdgeInsets.all(15),
            child: Column(
              children: <Widget> [
                const SizedBox(height: 30),
                conversationName(),
                const SizedBox(height: 10),
                const Text('Users', style: TextStyle(fontSize: 20)),
                usersList(),
              ],
          ),
        ),
    );
  }
}