import 'package:custom_pop_up_menu/custom_pop_up_menu.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/components/common_language_selector_bar.dart';
import 'package:flutter_translate/common/utils/object_utils.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/model/history_model.dart';
import 'package:flutter_translate/pages/translator/translator_controller.dart';
import 'package:get/get.dart';

class TranslatorView extends GetView<TranslatorController> {
  const TranslatorView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: BaseAppbar(
        titleWidget: const Expanded(child: CommonLanguageSelectorBar()),
        onBackTap: controller.onTapBack,
      ),
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20).w,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            20.verticalSpace,
            _translateInput(),
            20.verticalSpace,
            _historyList(),
          ],
        ),
      ),
    );
  }

  Widget _translateInput() {
    return Container(
      decoration: BoxDecoration(
        color: Color(controller.homeController.appColor.value),
        borderRadius: BorderRadius.all(Radius.circular(16.r)),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: TextField(
              textInputAction: TextInputAction.done,
              textAlignVertical: TextAlignVertical.center,
              textAlign: TextAlign.left,
              controller: controller.textController,
              maxLines: null,
              minLines: 1,
              focusNode: controller.focusNode,
              // autofocus: true,
              cursorColor: Colors.white,
              style: TextStyle(
                color: Colors.black,
                fontSize: 20.sp,
                height: 1.2,
              ),
              decoration: InputDecoration(
                counterText: '',
                isCollapsed: true,
                contentPadding: const EdgeInsets.fromLTRB(20, 26, 4, 26).w,
                border: InputBorder.none,
                hintText: "Type to Translate",
                hintStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 20.sp,
                ),
              ),
              onChanged: (value) => controller.changedText(value),
              onSubmitted: (value) => controller.translatedText(value),
            ),
          ),
          Obx(
            () => Padding(
              padding: EdgeInsets.only(
                top: controller.isValue.value ? 26 : 20,
                right: 20,
              ).w,
              child: GestureDetector(
                onTap: controller.onSpeakTranslation,
                child: ClipOval(
                  child: Visibility(
                    visible: controller.isValue.value,
                    replacement: Container(
                      width: 36.w,
                      height: 36.w,
                      color: Colors.white,
                      padding: EdgeInsets.all(5.w),
                      child: Image.asset(Assets.iconHomeMicrophone),
                    ),
                    child: Container(
                      width: 24.w,
                      height: 24.w,
                      color: Colors.white,
                      child: const Icon(Icons.close),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _historyList() {
    return Obx(
      () => controller.historyList.isNotEmpty
          ? Expanded(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "History",
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: const Color(0xff979797),
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      IconButton(
                        onPressed: controller.dropHistory,
                        icon: Image.asset(
                          Assets.iconDelete,
                          width: 24.w,
                        ),
                      ),
                    ],
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: controller.historyList.length,
                      itemBuilder: (context, index) {
                        HistoryModel historyModel =
                            controller.historyList[index];
                        return _historyItem(historyModel, index);
                      },
                    ),
                  ),
                ],
              ),
            )
          : Expanded(child: Container()),
    );
  }

  Widget _historyItem(HistoryModel historyModel, int index) {
    return CustomPopupMenu(
      arrowColor: Colors.black,
      barrierColor: Colors.transparent,
      position: PreferredPosition.top,
      verticalMargin: 0,
      pressType: PressType.longPress,
      menuBuilder: () {
        return GestureDetector(
          onTap: () => controller.removeHistoryByIndex(index),
          child: Container(
            padding: const EdgeInsets.all(10).w,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Image.asset(Assets.iconDelete, width: 24.w),
          ),
        );
      },
      child: InkWell(
        onTap: () => controller.historyTranslate(historyModel),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10).w,
              child: RichText(
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: ObjectUtils.getStr(historyModel.sourceText),
                      style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 16.sp,
                        color: const Color(0xff212121),
                      ),
                    ),
                    WidgetSpan(child: 6.horizontalSpace),
                    TextSpan(
                      text: ObjectUtils.getStr(historyModel.targetText),
                      style: TextStyle(
                        color: const Color(0xff979797),
                        fontSize: 13.sp,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}