import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:job_app/config/palette.dart';
import 'package:job_app/services/Web%20socket/connect_to%20_websocket.dart';
import 'package:job_app/singletons/user_info.dart';
import 'package:job_app/widgets/message_card.dart';

final socketUrl = "https://server.thejob.net/ws";

class Messages extends StatefulWidget {
  const Messages({Key key}) : super(key: key);

  @override
  _MessagesState createState() => _MessagesState();
}

class _MessagesState extends State<Messages> {
  ConnectToWebSocket _connectToWebSocket = ConnectToWebSocket();

  Future<void> connectToWebSocket() async {
    _connectToWebSocket.connectSock();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    connectToWebSocket();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Palette.backgroundColor,
      body: Container(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.fromLTRB(30, 40, 30, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'All Messages',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 22,
                        fontFamily: 'MontserratSemiBold'),
                  ),
                  CircleAvatar(
                    foregroundImage: NetworkImage(
                        "https://server.thejob.net/" + userInfo.user.image.url),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(20, 0, 30, 0),
              child: SizedBox(
                height: 55,
                width: double.maxFinite,
                child: TextField(
                  style: TextStyle(
                    fontSize: 16,
                    fontFamily: 'MontserratMedium',
                  ),
                  cursorColor: Palette.primary,
                  decoration: InputDecoration(
                    prefixIcon: Padding(
                      padding: const EdgeInsets.fromLTRB(20, 15, 10, 15),
                      child: SvgPicture.asset("assets/icons/search.svg"),
                    ),
                    hintText: "Search messages",
                    hintStyle: TextStyle(
                        color: Color(0xffB6B6B6),
                        fontSize: 16,
                        fontFamily: 'MontserratRegular',
                        fontWeight: FontWeight.w400),
                    fillColor: Colors.white,
                    filled: true,
                    contentPadding: EdgeInsets.fromLTRB(0, 10, 0, 0),
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(50),
                        borderSide: BorderSide(
                            color: Color.fromRGBO(255, 255, 255, 1))),
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(50),
                        borderSide: BorderSide(
                            color: Color.fromRGBO(255, 255, 255, 1))),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Expanded(
              child: ListView.separated(
                itemCount: 20,
                physics: BouncingScrollPhysics(),
                separatorBuilder: (context, index) => Divider(
                  thickness: 1,
                ),
                itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.only(
                      bottom: 5, top: 5, left: 30, right: 30),
                  child: MessageCard(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}