import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/global_config.dart';
import 'package:trans_lark/page/translator_record/translator_record_controller.dart';
import 'package:trans_lark/util/t_object_utils.dart';
import 'package:trans_lark/widget/t_base_appbar_widget.dart';
import 'package:trans_lark/widget/t_base_scrollbar_widget.dart';

class TranslatorRecordView extends GetView<TranslatorRecordController> {
  const TranslatorRecordView({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          backgroundColor: Colors.white,
          appBar: const TBaseAppbarWidget(
            title: 'History',
            backColor: Colors.black,
          ),
          body: Obx(() {
            if (controller.historyList.isNotEmpty) return _buildHistoryList();
            return Center(
              child: Image.asset(
                Assets.imagesHistoryEmptyState,
                width: 168,
                height: 168,
                fit: BoxFit.cover,
              ),
            );
          }),
        ),
        Obx(() {
          return Visibility(
            visible: controller.historyList.isNotEmpty,
            child: Positioned(
              top: 44,
              right: 20,
              child: Image.asset(
                Assets.imagesRecordSubscript,
                width: 96,
                height: 96,
                fit: BoxFit.cover,
              ),
            ),
          );
        }),
      ],
    );
  }

  Widget _buildHistoryList() {
    return TBaseScrollbarWidget(
      child: ListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 20),
        itemCount: controller.historyList.length,
        itemBuilder: (context, index) {
          final map = controller.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: () => controller.toHistoryItem(item),
                    child: Dismissible(
                      key: Key(item.translationTime.toString()),
                      dismissThresholds: const {
                        DismissDirection.startToEnd: 0.5,
                        DismissDirection.endToStart: 0.5,
                      },
                      onDismissed: (_) =>
                          controller.deleteHistoryItem(map.key, item, index),
                      background: Container(
                        color: const Color(0xffFC6C6B),
                        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(0xffFC6C6B),
                        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: () => controller.onTextToSpeech(item),
                              child: ClipOval(
                                child: Container(
                                  width: 32,
                                  height: 32,
                                  color: GlobalConfig.appColor,
                                  child: FittedBox(
                                    fit: BoxFit.none,
                                    child: Image.asset(
                                      Assets.imagesSpeakerIcon,
                                      width: 20,
                                      height: 20,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(width: 16),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    TObjectUtils.getStr(item.sourceText),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                      color: Color(0xff212121),
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  const SizedBox(height: 12),
                                  Text(
                                    TObjectUtils.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),
                  );
                },
              ),
            ],
          );
        },
      ),
    );
  }
}
