import 'package:date_picker_timeline/extra/color.dart';
import 'package:flutter/material.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/gas_refill_comments_model.dart';
import 'package:test_sa/modules/cm_module/views/components/action_button/footer_action_button.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_text_form_field.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';

class TemporaryChatUI extends StatefulWidget {
  TemporaryChatUI({Key? key}) : super(key: key);

  @override
  _TemporaryChatUIState createState() {
    return _TemporaryChatUIState();
  }
}

class _TemporaryChatUIState extends State<TemporaryChatUI> {
  List<GasRefillComment> chatList = [];

  bool isSender = true;
  TextEditingController textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const DefaultAppBar(title: "Comments"),
      body: Column(
        children: [
          ListView.separated(
            itemCount: chatList.length,
            padding: const EdgeInsets.all(16),
            separatorBuilder: (cxt, index) => 12.height,
            reverse: true,
            itemBuilder: (context, itemIndex) {
              final model = chatList[itemIndex];
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  model.createdBy!.userName!.heading6(context),
                  (model.comment ?? "").bodyText(context),
                  Align(
                    alignment: AlignmentDirectional.bottomEnd,
                    child: Text(DateTime.tryParse(model.createdOn!)!.toIso8601String().toServiceRequestDetailsFormatWithSS,
                        style: AppTextStyles.tinyFont.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral50)),
                  ),
                ],
              ).toShadowContainer(context,
                  paddingObject: const EdgeInsets.only(left: 12, right: 12, top: 8, bottom: 8),
                  borderRadius: 20,
                  showShadow: false,
                  backgroundColor: model.createdBy!.userId == "0" ? null : AppColor.neutral120.withOpacity(.25),
                  margin: EdgeInsets.only(left: model.createdBy!.userId == "0" ? 50 : 0, right: model.createdBy!.userId == "0" ? 0 : 50));
            },
          ).expanded,
          FooterActionButton.footerContainer(
            context: context,
            child: Row(
              children: [
                AppTextFormField(
                  labelText: "Type any comment",
                  backgroundColor: AppColor.neutral30,
                  // alignLabelWithHint: true,
                  showShadow: false,
                  controller: textEditingController,
                  style: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
                  hintStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
                  floatingLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
                  labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff767676)),
                  makeMultiLinesNull: true,
                ).expanded,
                12.width,
                Container(
                    height: 50,
                    width: 50,
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30),
                    child: IconButton(
                        splashColor: Colors.transparent,
                        hoverColor: Colors.transparent,
                        highlightColor: Colors.transparent,
                        onPressed: () {
                          if (textEditingController.text.isNotEmpty) {
                            final comment = GasRefillComment(
                              id: 0,
                              gasRefillId: 0,
                              comment: textEditingController.text,
                              createdOn: DateTime.now().toIso8601String(),
                              createdBy: CreatedBy(userId: isSender ? "0" : "1", userName: isSender ? "Me" : "User"),
                            );
                            isSender = !isSender;
                            chatList.add(comment);
                            textEditingController.clear();

                            chatList.sort((a, b) => DateTime.parse(b.createdOn!).compareTo(DateTime.parse(a.createdOn!)));
                            setState(() {});
                          }
                        },
                        icon: const Icon(Icons.send_rounded))

                    // const Icon(Icons.send_rounded).onPress(() {
                    //
                    // })
                    ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}