import 'package:eatvio_app/features/chat/presentation/bloc/chat_room_cubit/chat_room_cubit.dart';
import 'package:eatvio_app/features/chat/presentation/bloc/chat_room_cubit/chat_room_state.dart';
import 'package:eatvio_app/features/chat/presentation/widgets/chat_bubble_widget.dart';
import 'package:eatvio_app/locator_service.dart';
import 'package:flutter/cupertino.dart';
import 'package:eatvio_app/core/app_export.dart';
import 'package:flutter/material.dart';

class ChatScreen extends StatelessWidget {
  final String chatId;

  const ChatScreen({
    required this.chatId,
    super.key,
  });

  Widget build(BuildContext context) {
    return BlocProvider<ChatRoomCubit>(
      create: (BuildContext context) => sl()..initChat(chatId),
      child: BlocBuilder<ChatRoomCubit, ChatRoomState>(
        builder: (context, state) {
          if (state is ChatRoomStateLoading) {
            return Scaffold(
              body: Center(
                child: CupertinoActivityIndicator(),
              ),
            );
          } else if (state is ChatRoomStateLoaded) {
            return _buildChat(context, state);
          } else if (state is ChatRoomStateError) {
            return Center(child: Text(state.errorMessage));
          } else {
            return Scaffold(
              body: Center(
                child: CupertinoActivityIndicator(),
              ),
            );
          }
        },
      ),
    );
  }

  _buildChat(BuildContext context, ChatRoomStateLoaded state) {
    mediaQueryData = MediaQuery.of(context);
    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: PrimaryColors().gray50,
      appBar: AppBar(
        titleSpacing: 0,
        centerTitle: false,
        backgroundColor: Colors.white,
        forceMaterialTransparency: true,
        elevation: 0,
        title: Row(
          children: [
            Container(
              width: 40,
              height: 40,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Color(0xFFEBF4FF),
                shape: BoxShape.circle,
              ),
              child: Text(
                state.chatRoomModel.users['to_chat_user']!.name.split(' ').first[0] + state.chatRoomModel.users['to_chat_user']!.name.split(' ')[1][0],
                style: TextStyle(
                  color: Color(0xFF7F9CF5),
                  fontWeight: FontWeight.w400,
                  fontSize: 20,
                ),
              ),
            ),
            SizedBox(width: 16),
            Text(
              state.chatRoomModel.users['to_chat_user']!.name,
              style: CustomTextStyles.titleSmallBold.copyWith(
                color: PrimaryColors().blueGray800,
              ),
            ),
          ],
        ),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: Container(
              color: Color(0xFFF0F2F5),
              width: double.maxFinite,
              child: CustomScrollView(
                reverse: true,
                slivers: [
                  SliverPadding(
                    padding: EdgeInsets.symmetric(vertical: 16),
                    sliver: SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (context, index) => ChatBubbleWidget(
                          text: state.chatRoomModel.messages[state.chatRoomModel.messages.length - index - 1].data,
                          isCurrentUser: state.chatRoomModel.users['to_chat_user']!.id !=
                              state.chatRoomModel.messages[state.chatRoomModel.messages.length - index - 1].authorId,
                          mediaData: state.chatRoomModel.messages[state.chatRoomModel.messages.length - index - 1].mediaData,
                        ),
                        childCount: state.chatRoomModel.messages.length,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 8),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(width: 8),
                InkWell(
                  onTap: () {},
                  borderRadius: BorderRadiusStyle.circleBorder17,
                  child: Ink(
                    height: 32,
                    width: 32,
                    child: Icon(
                      Icons.attach_file_rounded,
                      size: 28,
                      color: Color(0xFF858E99),
                    ),
                  ),
                ),
                SizedBox(width: 8),
                SizedBox(
                  width: mediaQueryData.size.width - 96,
                  child: TextFormField(
                    maxLines: 5,
                    minLines: 1,
                    keyboardType: TextInputType.multiline,
                    style: TextStyle(
                      fontSize: 16,
                      fontFamily: 'Mulish',
                      fontWeight: FontWeight.w400,
                      color: Colors.black,
                    ),
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                      hintText: 'Сообщение',
                      hintStyle: TextStyle(
                        fontSize: 16,
                        fontFamily: 'Mulish',
                        fontWeight: FontWeight.w400,
                        color: Color(0xFFAEAEB2),
                      ),
                      filled: true,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadiusStyle.circleBorder17,
                        borderSide: BorderSide(
                          color: Color(0xFFD1D1D6),
                          width: 1,
                        ),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadiusStyle.circleBorder17,
                        borderSide: BorderSide(
                          color: Color(0xFFD1D1D6),
                          width: 1,
                        ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadiusStyle.circleBorder17,
                        borderSide: BorderSide(
                          color: Color(0xFFD1D1D6),
                          width: 1,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(width: 8),
                InkWell(
                  borderRadius: BorderRadiusStyle.circleBorder17,
                  onTap: () {},
                  child: Ink(
                    height: 32,
                    width: 32,
                    child: Icon(
                      Icons.send_outlined,
                      size: 28,
                      color: Color(0xFF858E99),
                    ),
                  ),
                ),
                SizedBox(width: 8),
              ],
            ),
          ),
        ],
      ),
    );
  }
}