import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:translator_lux/util/image_asset.dart';
import 'package:translator_lux/util/svg_asset.dart';
import 'package:translator_lux/widget/tranlator_from_to.dart';

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

/// @description: 翻译页面
/// @lifu
/// @date: 2024-06-27 13:55:27
class TranlatorPage extends StatefulWidget {
  const TranlatorPage({super.key});
  static String routName = "/translate";
  @override
  State<TranlatorPage> createState() => _TranlatorPageState();
}

class _TranlatorPageState extends State<TranlatorPage> {
  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(
      appBar: AppBar(
        surfaceTintColor: Colors.transparent,
        automaticallyImplyLeading: false,
        title: Row(
          children: [
            IconButton(
              onPressed: () {
                Get.back();
              },
              icon: const Icon(
                Icons.arrow_back_ios,
              ),
            ),
            const Expanded(child: TranslatorFromTo()),
          ],
        ),
      ),
      body: SafeArea(
          child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              constraints: const BoxConstraints(
                maxHeight: 200.0,
                minHeight: 76.0,
              ),
              decoration: BoxDecoration(
                  border:
                      Border.all(width: 1.5, color: const Color(0xff0087FF)),
                  color: const Color(0xff45A7FE),
                  borderRadius: const BorderRadius.all(Radius.circular(10))),
              padding: const EdgeInsets.only(
                  left: 16.0, right: 16.0, top: 10.0, bottom: 4.0),
              child: TextField(
                textInputAction: TextInputAction.done,
                controller: state.textController,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                ),
                maxLines: null,
                autofocus: true,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: "Type to Translate",
                  hintStyle: const TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.w400,
                  ),
                  suffixIcon: Obx(
                    () => GestureDetector(
                      onTap: () {
                        if (state.isValue.value) {
                          state.textController.text = "";
                          state.isValue.value = !state.isValue.value;
                        } else {}
                      },
                      child: Container(
                        height: 36,
                        width: 36,
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: const Color(0xff8BCFFE),
                          borderRadius: BorderRadius.circular(25),
                        ),
                        child: state.isValue.value
                            ? const Icon(Icons.close)
                            : SvgPicture.asset(SvgAsset.homeVoice),
                      ),
                    ),
                  ),
                ),
                onChanged: (value) {
                  if (value != "" && value.isNotEmpty) {
                    state.isValue.value = true;
                  } else {
                    state.isValue.value = false;
                  }
                },
                onSubmitted: (value) {
                  if (value != "" && value.isNotEmpty) {
                    logic.toResult(value);
                  }
                },
              ),
            ),
            Obx(() => state.isThereData.value
                ? Expanded(
                    child: Column(
                      children: [
                        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(
                                ImageAsset.deleteIcon,
                                width: 24,
                                height: 24,
                              ),
                            )
                          ],
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Expanded(
                          child: ListView.builder(
                            padding: EdgeInsets.zero,
                            itemBuilder: (context, index) {
                              return ListTile(
                                title: RichText(
                                  overflow: TextOverflow.ellipsis,
                                  text: TextSpan(
                                    children: [
                                      TextSpan(
                                        text: state
                                            .historyShowData[index].sourceText!,
                                        style: const TextStyle(
                                          fontWeight: FontWeight.w500,
                                          fontSize: 16,
                                          color: Colors.black,
                                        ),
                                      ),
                                      const WidgetSpan(
                                          child: SizedBox(
                                        width: 6,
                                      )),
                                      TextSpan(
                                        text: state
                                            .historyShowData[index].targetText!,
                                        style: const TextStyle(
                                          color: Color(0xff979797),
                                          fontSize: 13,
                                          fontWeight: FontWeight.w400,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                onTap: () {
                                  state.textController.text =
                                      state.historyShowData[index].sourceText!;
                                  state.isValue.value = true;
                                },
                              );
                            },
                            itemCount: state.historyShowData.length,
                          ),
                        ),
                      ],
                    ),
                  )
                : Expanded(
                    child: Center(
                      child: Image.asset(
                        ImageAsset.rabbitSayGood,
                        width: 100,
                        height: 100,
                      ),
                    ),
                  )),
          ],
        ),
      )),
    );
  }
}