import 'dart:convert';

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:mohem_flutter_app/api/chat/chat_provider_model.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/widgets/bottom_sheet.dart';
import 'package:mohem_flutter_app/widgets/bottom_sheets/search_employee_bottom_sheet.dart';
import 'package:mohem_flutter_app/widgets/shimmer/dashboard_shimmer_widget.dart';
import 'package:provider/provider.dart';

class ChatHomeScreen extends StatefulWidget {
  @override
  State<ChatHomeScreen> createState() => _ChatHomeScreenState();
}

class _ChatHomeScreenState extends State<ChatHomeScreen> {
  TextEditingController search = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    search.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: MyColors.white,
      body: Consumer<ChatProviderModel>(
        builder: (BuildContext context, ChatProviderModel m, Widget? child) {
          return m.isLoading
              ? ChatHomeShimmer()
              : ListView(
                  shrinkWrap: true,
                  physics: const AlwaysScrollableScrollPhysics(),
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                      child: TextField(
                        controller: m.search,
                        onChanged: (String val) {
                          m.filter(val);
                        },
                        decoration: InputDecoration(
                          border: fieldBorder(radius: 5, color: 0xFFE5E5E5),
                          focusedBorder: fieldBorder(radius: 5, color: 0xFFE5E5E5),
                          enabledBorder: fieldBorder(radius: 5, color: 0xFFE5E5E5),
                          contentPadding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                          hintText: LocaleKeys.searchfromchat.tr(),
                          hintStyle: const TextStyle(color: MyColors.lightTextColor, fontStyle: FontStyle.italic),
                          filled: true,
                          fillColor: const Color(0xFFF7F7F7),
                          suffixIcon: m.search.text.isNotEmpty
                              ? IconButton(
                                  onPressed: () {
                                    m.clearSelections();
                                  },
                                  icon: const Icon(
                                    Icons.clear,
                                    size: 22,
                                  ),
                                  color: MyColors.redA3Color,
                                )
                              : null,
                        ),
                      ),
                    ),
                    if (m.searchedChats != null)
                      ListView.separated(
                        itemCount: m.searchedChats!.length,
                        padding: const EdgeInsets.only(bottom: 80),
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemBuilder: (BuildContext context, int index) {
                          return SizedBox(
                            height: 55,
                            child: ListTile(
                              leading: Stack(
                                children: <Widget>[
                                  SvgPicture.asset(
                                    "assets/images/user.svg",
                                    height: 48,
                                    width: 48,
                                  ),
                                  Positioned(
                                    right: 5,
                                    bottom: 1,
                                    child: Container(
                                      width: 10,
                                      height: 10,
                                      decoration: BoxDecoration(
                                        color: m.searchedChats![index].userStatus == 1 ? MyColors.green2DColor : Colors.red,
                                        borderRadius: const BorderRadius.all(
                                          Radius.circular(10),
                                        ),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                              title: (m.searchedChats![index].userName!.replaceFirst(".", " ").capitalizeFirstofEach ?? "").toText14(color: MyColors.darkTextColor),
                              // subtitle: (m.searchedChats![index].isTyping == true ? "Typing ..." : "").toText11(color: MyColors.normalTextColor),
                              trailing: SizedBox(
                                width: 60,
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  mainAxisSize: MainAxisSize.max,
                                  children: <Widget>[
                                    // if (m.searchedChats![index].unreadMessageCount != null)
                                    //   Flexible(
                                    //     child: Container(
                                    //       padding: EdgeInsets.zero,
                                    //       alignment: Alignment.centerRight,
                                    //       width: 18,
                                    //       height: 18,
                                    //       decoration: const BoxDecoration(
                                    //         color: MyColors.redColor,
                                    //         borderRadius: BorderRadius.all(
                                    //           Radius.circular(20),
                                    //         ),
                                    //       ),
                                    //       child: (m.searchedChats![index].unreadMessageCount!.toString())
                                    //           .toText10(
                                    //             color: MyColors.white,
                                    //           )
                                    //           .center,
                                    //     ),
                                    //   ),
                                    Flexible(
                                      child: IconButton(
                                        alignment: Alignment.centerRight,
                                        padding: EdgeInsets.zero,
                                        icon: Icon(m.searchedChats![index].isFav != null && m.searchedChats![index].isFav == false ? Icons.star_sharp : Icons.star_sharp),
                                        color: m.searchedChats![index].isFav != null && m.searchedChats![index].isFav == true ? MyColors.yellowColor : MyColors.grey35Color,
                                        onPressed: () {
                                          if (m.searchedChats![index].isFav == null || m.searchedChats![index].isFav == false) {
                                            m.favoriteUser(userID: AppState().chatDetails!.response!.id!, targetUserID: m.searchedChats![index].id!);
                                          } else if (m.searchedChats![index].isFav == true) {
                                            m.unFavoriteUser(userID: AppState().chatDetails!.response!.id!, targetUserID: m.searchedChats![index].id!);
                                          } else {
                                            m.favoriteUser(userID: AppState().chatDetails!.response!.id!, targetUserID: m.searchedChats![index].id!);
                                          }
                                        },
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              minVerticalPadding: 0,
                              onTap: () {
                                Navigator.pushNamed(
                                  context,
                                  AppRoutes.chatDetailed,
                                  arguments: {"targetUser": m.searchedChats![index], "isNewChat": false},
                                ).then((Object? value) {
                                  m.clearSelections();
                                  m.notifyListeners();
                                });
                              },
                            ),
                          );
                        },
                        separatorBuilder: (BuildContext context, int index) => const Padding(
                          padding: EdgeInsets.only(right: 10, left: 70),
                          child: Divider(
                            color: Color(0xFFE5E5E5),
                          ),
                        ),
                      ),
                  ],
                );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Container(
          width: 60,
          height: 60,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              transform: GradientRotation(.46),
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [
                MyColors.gradiantEndColor,
                MyColors.gradiantStartColor,
              ],
            ),
          ),
          child: const Icon(
            Icons.add,
            size: 30,
            color: MyColors.white,
          ),
        ),
        onPressed: () async {
          showMyBottomSheet(
            context,
            callBackFunc: () {},
            child: SearchEmployeeBottomSheet(
              title: LocaleKeys.searchForEmployee.tr(),
              apiMode: LocaleKeys.delegate.tr(),
              fromChat: true,
              onSelectEmployee: (_selectedEmployee) {},
            ),
          );
        },
      ),
    );
  }

  OutlineInputBorder fieldBorder({required double radius, required int color}) {
    return OutlineInputBorder(
      borderRadius: BorderRadius.circular(radius),
      borderSide: BorderSide(
        color: Color(color),
      ),
    );
  }
}