import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_translate/common/components/base_appbar.dart';
import 'package:flutter_translate/common/utils/object_utils.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/pages/history/history_controller.dart';
import 'package:get/get.dart';
import 'package:quds_ui_kit/animations/quds_animated_icon.dart';

class HistoryView extends GetView<HistoryController> {
  const HistoryView({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          backgroundColor: Colors.white,
          appBar: const BaseAppbar(title: 'History'),
          body: _body(),
        ),
        // _subscript(),
      ],
    );
  }

  Widget _body() {
    return Obx(() {
      if (controller.historyMap.isNotEmpty) return _history();
      return Container(
        alignment: Alignment.center,
        width: double.infinity,
        height: double.infinity,
        child: const Text("Nothing"),
      );
    });
  }

  Widget _history() {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(vertical: 20).w,
      itemCount: controller.historyMap.length,
      itemBuilder: (context, index) {
        final map = controller.historyMap.entries.elementAt(index);
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20).w,
              child: Text(
                map.key,
                style: TextStyle(
                  color: const Color(0xff949494),
                  fontSize: 12.sp,
                ),
              ),
            ),
            ListView.separated(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: map.value.length,
              itemBuilder: (context, index) {
                final item = map.value[index];
                return InkWell(
                  onTap: () => controller.historyTranslate(item),
                  child: Dismissible(
                    key: Key(item.translationTime.toString()),
                    dismissThresholds: const {
                      DismissDirection.startToEnd: 0.5,
                      DismissDirection.endToStart: 0.5,
                    },
                    onDismissed: (_) => controller.remove(map.key, item),
                    background: Container(
                      color: const Color(0xffFC6C6B),
                      child: Stack(
                        children: [
                          Positioned(
                            left: 16.w,
                            top: 0,
                            bottom: 0,
                            child: Image.asset(
                              width: 24,
                              height: 24,
                              Assets.iconDelete,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                    secondaryBackground: Container(
                      color: const Color(0xffFC6C6B),
                      child: Stack(
                        children: [
                          Positioned(
                            right: 16.w,
                            top: 0,
                            bottom: 0,
                            child: Image.asset(
                              width: 24,
                              height: 24,
                              Assets.iconDelete,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 20,
                        vertical: 20,
                      ).w,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Obx(
                            () => GestureDetector(
                              onTap: () => controller.voiceTranslator(item),
                              child: ClipOval(
                                child: Container(
                                  width: 32.w,
                                  height: 32.w,
                                  color: Color(controller.homeController.appColor.value),
                                  child: QudsAnimatedIcon(
                                    iconSize: 28.w,
                                    color: Colors.white,
                                    iconData: AnimatedIcons.pause_play,
                                    showStartIcon:
                                    controller.isPlaying.value &&
                                        controller.playTranslationTime
                                            .value ==
                                            item.translationTime,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          16.horizontalSpace,
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  ObjectUtils.getStr(item.sourceText),
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: const Color(0xff212121),
                                    fontSize: 16.sp,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                                12.verticalSpace,
                                Text(
                                  ObjectUtils.getStr(item.targetText),
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: const Color(0xff979797),
                                    fontSize: 13.sp,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
              separatorBuilder: (context, index) {
                return Container(
                  height: 0.5,
                  margin: const EdgeInsets.symmetric(horizontal: 20).w,
                  color: const Color(0xffEDEDED),
                );
              },
            ),
          ],
        );
      },
    );
  }

  Widget _subscript() {
    return Obx(() {
      return Visibility(
        visible: controller.historyMap.isNotEmpty,
        child: Positioned(
          top: 44.w,
          right: 20.w,
          child: SizedBox(
            width: 96.w,
            child: Image.asset(Assets.gifSubscript),
          ),
        ),
      );
    });
  }
}