import 'package:custom_pop_up_menu/custom_pop_up_menu.dart';
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/util/obj_util.dart';
import 'package:trans_lark/widget/base_appbar.dart';
import 'package:trans_lark/widget/language_bar.dart';

import 'translator_logic.dart';
import 'translator_state.dart';

/// @description: 翻译页面
/// @lifu
/// @date: 2024-06-27 13:55:27
class TranslatorPage extends StatefulWidget {
  const TranslatorPage({super.key});

  @override
  State<TranslatorPage> createState() => _TranslatorPageState();
}

class _TranslatorPageState extends State<TranslatorPage> {
  final TranslatorLogic logic = Get.put(TranslatorLogic());

  final TranslatorState state = Get.find<TranslatorLogic>().state;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: const BaseAppBar(
        titleWidget: LanguageBar(),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 20),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 1.5, color: const Color(0xff0087FF)),
                color: const Color(0xff45A7FE),
                borderRadius: const BorderRadius.all(Radius.circular(16)),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: TextField(
                      textInputAction: TextInputAction.done,
                      textAlignVertical: TextAlignVertical.center,
                      textAlign: TextAlign.left,
                      controller: state.textController,
                      maxLines: null,
                      minLines: 1,
                      autofocus: true,
                      cursorColor: Colors.white,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                        height: 1.2,
                      ),
                      decoration: const InputDecoration(
                        counterText: '',
                        isCollapsed: true,
                        contentPadding: EdgeInsets.fromLTRB(20, 26, 4, 26),
                        border: InputBorder.none,
                        hintText: "Type to Translate",
                        hintStyle: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                        ),
                      ),
                      onChanged: (value) => logic.onChanged(value),
                      onSubmitted: (value) => logic.onSubmitted(value),
                    ),
                  ),
                  Obx(() {
                    return Padding(
                      padding: EdgeInsets.only(top: state.isValue.value ? 26 : 20, right: 20),
                      child: GestureDetector(
                        onTap: logic.onTapSuffix,
                        child: ClipOval(
                          child: Visibility(
                            visible: state.isValue.value,
                            replacement: Container(
                              width: 36,
                              height: 36,
                              color: const Color(0xff8BCFFE),
                              child: FittedBox(
                                fit: BoxFit.none,
                                child: SvgPicture.asset(Assets.svgHomeVoice),
                              ),
                            ),
                            child: Container(
                              width: 24,
                              height: 24,
                              color: Colors.white,
                              child: const Icon(Icons.close, size: 12),
                            ),
                          ),
                        ),
                      ),
                    );
                  }),
                ],
              ),
            ),
            Obx(() => state.historyList.isNotEmpty
                ? Expanded(
              child: Column(
                children: [
                  const SizedBox(height: 30),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text(
                        "History",
                        style: TextStyle(
                          fontSize: 16,
                          color: Color(0xff979797),
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      IconButton(
                        onPressed: logic.cleanAllHistory,
                        icon: Image.asset(
                          Assets.imagesDeleteIcon,
                          width: 24,
                          height: 24,
                        ),
                      ),
                    ],
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: state.historyList.length,
                      itemBuilder: (context, index) {
                        final historyEntity = state.historyList[index];
                        return CustomPopupMenu(
                          arrowColor: Colors.black,
                          barrierColor: Colors.transparent,
                          position: PreferredPosition.top,
                          verticalMargin: 0,
                          pressType: PressType.longPress,
                          menuBuilder: () {
                            return GestureDetector(
                              onTap: () => logic.deleteItem(index),
                              child: Container(
                                padding: const EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                  color: Colors.black,
                                  borderRadius: BorderRadius.circular(8),
                                ),
                                child: Image.asset(
                                  Assets.imagesDeleteIcon,
                                  width: 24,
                                  height: 24,
                                ),
                              ),
                            );
                          },
                          child: InkWell(
                            onTap: () => logic.onTapHistoryItem(historyEntity),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.symmetric(vertical: 10),
                                  child: RichText(
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    text: TextSpan(
                                      children: [
                                        TextSpan(
                                          text: ObjUtil.getStr(
                                              historyEntity.sourceText),
                                          style: const TextStyle(
                                            fontWeight: FontWeight.w500,
                                            fontSize: 16,
                                            color: Color(0xff212121),
                                          ),
                                        ),
                                        const WidgetSpan(
                                          child: SizedBox(
                                            width: 6,
                                          ),
                                        ),
                                        TextSpan(
                                          text: ObjUtil.getStr(
                                              historyEntity.targetText),
                                          style: const TextStyle(
                                            color: Color(0xff979797),
                                            fontSize: 13,
                                            fontWeight: FontWeight.w400,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            )
                : Expanded(
              child: Center(
                child: Image.asset(
                  Assets.imagesRabbitSayGood,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            ),
          ],
        ),
      ),
    );
  }
}