import 'package:flutter/material.dart';

import '/components/custom_circle_avatar.dart';
import '/models/conversations.dart';

class ConversationEditDetails extends StatefulWidget {
  final Function(String conversationName) saveCallback;
  final Conversation? conversation;
  const ConversationEditDetails({
    Key? key,
    required this.saveCallback,
    this.conversation,
  }) : super(key: key);

  @override
  State<ConversationEditDetails> createState() => _ConversationEditDetails();
}

class _ConversationEditDetails extends State<ConversationEditDetails> {
  final _formKey = GlobalKey<FormState>();

  List<Conversation> conversations = [];

  TextEditingController conversationNameController = TextEditingController();

  @override
  void initState() {
    if (widget.conversation != null) {
      conversationNameController.text = widget.conversation!.name;
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    const TextStyle inputTextStyle = TextStyle(
        fontSize: 25,
    );

    final OutlineInputBorder inputBorderStyle = OutlineInputBorder(
        borderRadius: BorderRadius.circular(5),
        borderSide: const BorderSide(
            color: Colors.transparent,
        )
    );

    final ButtonStyle buttonStyle = ElevatedButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
        textStyle: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.bold,
            color: Theme.of(context).colorScheme.error,
        ),
    );

    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 != null ?
                                        widget.conversation!.name + " Settings" :
                                        'Add Conversation',
                                        style: const TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.w600
                                        ),
                                    ),
                                  ],
                              ),
                          ),
                        ],
                    ),
                ),
          ),
        ),
        body: Center(
            child: Padding(
                padding: const EdgeInsets.only(
                    top: 50,
                    left: 25,
                    right: 25,
                ),
                child: Form(
                    key: _formKey,
                    child: Column(
                        children: [
                          const CustomCircleAvatar(
                              icon: const Icon(Icons.people, size: 60),
                              imagePath: null,
                              radius: 50,
                          ),
                          const SizedBox(height: 30),
                          TextFormField(
                              controller: conversationNameController,
                              textAlign: TextAlign.center,
                              decoration: InputDecoration(
                                  hintText: 'Title',
                                  enabledBorder: inputBorderStyle,
                                  focusedBorder: inputBorderStyle,
                              ),
                              style: inputTextStyle,
                              // The validator receives the text that the user has entered.
                              validator: (value) {
                                if (value == null || value.isEmpty) {
                                  return 'Add a title';
                                }
                                return null;
                              },
                          ),
                          const SizedBox(height: 30),
                          ElevatedButton(
                              style: buttonStyle,
                              onPressed: () {
                                if (!_formKey.currentState!.validate()) {
                                  // TODO: Show error here
                                  return;
                                }

                                widget.saveCallback(conversationNameController.text);
                              },
                              child: const Text('Save'),
                          ),
                      ],
                  ),
              ),
          ),
      ),
    );
  }
}