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/page/translator/translator_logic.dart';
import 'package:trans_lark/page/translator/translator_state.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';

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,
                        ),
                      ),
                    ),
            ),
          ],
        ),
      ),
    );
  }
}
