import 'package:Envelope/models/conversation_users.dart';
import 'package:Envelope/models/my_profile.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> {
  List<ConversationUser> users = [];
  MyProfile? profile;

  TextEditingController nameController = TextEditingController();

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

  Future<void> getUsers() async {
    users = await getConversationUsers(widget.conversation);
    profile = await MyProfile.getProfile();
    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.conversation.admin ? IconButton(
              iconSize: 20,
              icon: const Icon(Icons.edit),
              padding: const EdgeInsets.all(5.0),
              splashRadius: 25,
              onPressed: () {
                // TODO: Redirect to edit screen
              },
          ) : const SizedBox.shrink(),
      ],
    );
  }

  Widget sectionTitle(String title) {
    return Align(
        alignment: Alignment.centerLeft,
        child: Container(
            padding: const EdgeInsets.only(left: 12),
            child: Text(
                title,
                style: const TextStyle(fontSize: 20),
            ),
        ),
    );
  }

  Widget settings() {
    return Align(
        alignment: Alignment.centerLeft,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const SizedBox(height: 5),
            TextButton.icon(
                label: const Text(
                    'Disappearing Messages',
                    style: TextStyle(fontSize: 16)
                ),
                icon: const Icon(Icons.timer),
                style: ButtonStyle(
                    alignment: Alignment.centerLeft,
                    foregroundColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Theme.of(context).colorScheme.onBackground;
                        },
                    )
                ),
                onPressed: () {
                  print('Disappearing Messages');
                }
            ),
            TextButton.icon(
                label: const Text(
                    'Permissions',
                    style: TextStyle(fontSize: 16)
                ),
                icon: const Icon(Icons.lock),
                style: ButtonStyle(
                    alignment: Alignment.centerLeft,
                    foregroundColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Theme.of(context).colorScheme.onBackground;
                        },
                    )
                ),
                onPressed: () {
                  print('Permissions');
                }
            ),
          ],
      ),
    );
  }

  Widget myAccess() {
    return Align(
        alignment: Alignment.centerLeft,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
             TextButton.icon(
                label: const Text(
                    'Leave Conversation',
                    style: TextStyle(fontSize: 16)
                ),
                icon: const Icon(Icons.exit_to_app),
                style: const ButtonStyle(
                    alignment: Alignment.centerLeft,
                ),
                onPressed: () {
                  print('Leave Group');
                }
            ),
          ],
      ),
    );
  }

  Widget usersList() {
    return ListView.builder(
        itemCount: users.length,
        shrinkWrap: true,
        padding: const EdgeInsets.only(top: 5, bottom: 0),
        itemBuilder: (context, i) {
          return ConversationSettingsUserListItem(
              user: users[i],
              isAdmin: widget.conversation.admin,
              profile: profile!, // TODO: Fix this
          );
        }
    );
  }

  @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: 25),
                widget.conversation.admin ?
                  sectionTitle('Settings') :
                  const SizedBox.shrink(),
                widget.conversation.admin ?
                  settings() :
                  const SizedBox.shrink(),
                widget.conversation.admin ?
                  const SizedBox(height: 25) :
                  const SizedBox.shrink(),
                sectionTitle('Members'),
                usersList(),
                const SizedBox(height: 25),
                myAccess(),
              ],
          ),
        ),
    );
  }
}