import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/page/translator_history/translator_history_logic.dart';
import 'package:trans_lark/page/translator_history/translator_history_state.dart';
import 'package:trans_lark/util/obj_util.dart';
import 'package:trans_lark/widget/base_appbar.dart';
import 'package:trans_lark/widget/base_scrollbar.dart';

class TranslatorHistoryPage extends StatefulWidget {
  static String routName = "/translateHistory";

  const TranslatorHistoryPage({super.key});

  @override
  State<TranslatorHistoryPage> createState() => _TranslatorHistoryPageState();
}

class _TranslatorHistoryPageState extends State<TranslatorHistoryPage> {
  final TranslatorHistoryLogic logic = Get.put(TranslatorHistoryLogic());

  final TranslatorHistoryState state = Get.find<TranslatorHistoryLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          backgroundColor: Colors.white,
          appBar: const BaseAppBar(
            title: 'History',
            backColor: Colors.black,
          ),
          body: Obx(() {
            return state.historyList.isNotEmpty ? BaseScrollbar(
              child: ListView.builder(
                padding: const EdgeInsets.symmetric(vertical: 20),
                itemCount: state.historyList.length,
                itemBuilder: (context, index) {
                  final map = state.historyList.entries.elementAt(index);
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: Text(
                          map.key,
                          style: const TextStyle(
                            color: Color(0xff949494),
                            fontSize: 12,
                          ),
                        ),
                      ),
                      ListView.separated(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: map.value.length,
                        itemBuilder: (context, index) {
                          final item = map.value[index];
                          return InkWell(
                            onTap: () => logic.onTapItem(item),
                            child: Dismissible(
                              key: Key(item.translationTime.toString()),
                              dismissThresholds: const {
                                DismissDirection.startToEnd: 0.5,
                                DismissDirection.endToStart: 0.5,
                              },
                              onDismissed: (_) => logic.deleteItem(map.key, item, index),
                              background: Container(
                                color: const Color(0xffFF98BC),
                                child: Stack(
                                  children: [
                                    Positioned(
                                      left: 16,
                                      top: 0,
                                      bottom: 0,
                                      child: Image.asset(
                                        Assets.imagesDeleteIcon,
                                        width: 24,
                                        height: 24,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              secondaryBackground: Container(
                                color: const Color(0xffFF98BC),
                                child: Stack(
                                  children: [
                                    Positioned(
                                      right: 16,
                                      top: 0,
                                      bottom: 0,
                                      child: Image.asset(
                                        Assets.imagesDeleteIcon,
                                        width: 24,
                                        height: 24,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    GestureDetector(
                                      onTap: () => logic.translatorTtsPlay(item),
                                      child: ClipOval(
                                        child: Container(
                                          width: 32,
                                          height: 32,
                                          color: const Color(0xff4ECA8C),
                                          child: FittedBox(
                                            fit: BoxFit.none,
                                            child: SvgPicture.asset(
                                              Assets.svgSpeakerWhite,
                                              width: 20,
                                              height: 20,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    const SizedBox(width: 16),
                                    Expanded(
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            ObjUtil.getStr(item.sourceText),
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                              color: Color(0xff212121),
                                              fontSize: 16,
                                              fontWeight: FontWeight.w500,
                                            ),
                                          ),
                                          const SizedBox(height: 12),
                                          Text(
                                            ObjUtil.getStr(item.targetText),
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                              color: Color(0xff979797),
                                              fontSize: 13,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        },
                        separatorBuilder: (context, index) {
                          return Container(
                            height: 0.5,
                            margin: const EdgeInsets.symmetric(horizontal: 20),
                            color: const Color(0xffEDEDED),
                          );
                        },
                      ),
                    ],
                  );
                },
              ),
            ) : Center(
              child: Image.asset(
                Assets.imagesRabbitSayGood,
                width: 90,
                height: 90,
                fit: BoxFit.cover,
              ),
            );
          }),
        ),
        Obx(() {
          return Visibility(
            visible: state.historyList.isNotEmpty,
            child: Positioned(
              top: 59,
              right: 23,
              child: Image.asset(
                Assets.imagesRabbitSayGood,
                width: 90,
                height: 90,
                fit: BoxFit.cover,
              ),
            ),
          );
        }),
      ],
    );
  }
}