import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:translator_lux/page/translator/translator_view.dart';
import 'package:translator_lux/translator_history/translator_history_view.dart';
import 'package:translator_lux/widget/camera_widget.dart';
import 'package:translator_lux/util/image_asset.dart';
import 'package:translator_lux/util/svg_asset.dart';
import 'package:translator_lux/util/tts_util.dart';
import 'package:translator_lux/widget/tranlator_from_to.dart';

import 'main_logic.dart';
import 'main_state.dart';

/// @description: 翻译首页
/// @author : lifu
/// @date: 2024-06-26 14:23:43
class MainPage extends StatelessWidget {
  static String routName = "/mainPage";
  final MainLogic logic = Get.put(MainLogic());
  final MainState state = Get.find<MainLogic>().state;

  MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // floatingActionButton: FloatingActionButton(onPressed: () async {
      //   // await TranslatorHistoryTable.cleanShowData();

      //   // List<TranslatorHistoryEntity> queryShowData =
      //   //     await TranslatorHistoryTable.queryShowData();
      //   // for (var element in queryShowData) {
      //   //   debugPrint(element.toString());
      //   // }

      //   // TranslatorHistoryTable.queryData();

      //   // TranslatorHistoryTable.cleanShowDataByTid(
      //   //     "e1916380-09db-1055-a599-9dcbcefb47d8");

      //   // TranslatorHistoryTable.deleteHistoryDataByTid(
      //   //     "e1916380-09db-1055-a599-9dcbcefb47d8");
      // }),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
            image: DecorationImage(
          image: AssetImage(
            ImageAsset.homeBackground,
          ),
          fit: BoxFit.cover,
        )),
        child: SafeArea(
            child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      "Courses",
                      style:
                          TextStyle(fontSize: 24, fontWeight: FontWeight.w700),
                    ),
                    Container(
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                          color: const Color(0xff4ECA8C),
                          borderRadius: BorderRadius.circular(16)),
                      child: SvgPicture.asset(
                        SvgAsset.homeMore,
                        fit: BoxFit.contain,
                      ),
                    )
                  ],
                ),
              ),
              Stack(
                children: [
                  Column(
                    children: [
                      Container(
                        height: 40,
                      ),
                      Container(
                        height: 233,
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: 1.5, color: const Color(0xff3AAA72)),
                            color: const Color.fromARGB(213, 78, 202, 140),
                            borderRadius: BorderRadius.circular(20)),
                      ),
                    ],
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      SizedBox(
                        width: 130,
                        height: 50,
                        child: Row(
                          children: [
                            const Text(
                              "Daily Quote",
                              style: TextStyle(
                                  fontSize: 18,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.white),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(left: 5),
                              child: SvgPicture.asset(SvgAsset.homeRightIcon),
                            )
                          ],
                        ),
                      ),
                      Image.asset(
                        ImageAsset.rabbitSayGood,
                        width: 90,
                        height: 90,
                      ),
                    ],
                  ),
                  Column(
                    children: [
                      const SizedBox(
                        height: 83,
                      ),
                      Container(
                        padding: const EdgeInsets.all(15),
                        decoration: BoxDecoration(
                          border: Border.all(
                              width: 1.5, color: const Color(0xff3AAA72)),
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                        ),
                        height: 190,
                        width: double.infinity,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            const Text(
                              "English",
                              style: TextStyle(color: Colors.grey),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                const Text(
                                  "Let's discuss this later.",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                                GestureDetector(
                                  onTap: () {
                                    TtsUtil.translatorTtsPlay(
                                      "Let's discuss this later.",
                                    );
                                  },
                                  child: Container(
                                    width: 24,
                                    height: 24,
                                    padding: const EdgeInsets.all(3),
                                    decoration: BoxDecoration(
                                        color: const Color.fromARGB(
                                            78, 78, 202, 140),
                                        borderRadius:
                                            BorderRadius.circular(12)),
                                    child: SvgPicture.asset(
                                      SvgAsset.speaker,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            const Divider(
                              height: 1,
                            ),
                            const Text(
                              "Chinese",
                              style: TextStyle(color: Colors.grey),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                const Text(
                                  "我们稍后再讨论这个",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                                GestureDetector(
                                  onTap: () {
                                    TtsUtil.translatorTtsPlay("我们稍后再讨论这个");
                                  },
                                  child: Container(
                                    width: 24,
                                    height: 24,
                                    padding: const EdgeInsets.all(3),
                                    decoration: BoxDecoration(
                                        color: const Color.fromARGB(
                                            78, 78, 202, 140),
                                        borderRadius:
                                            BorderRadius.circular(12)),
                                    child: SvgPicture.asset(
                                      SvgAsset.speaker,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      )
                    ],
                  )
                ],
              ),
              Expanded(
                  child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              Get.to(() => const CameraPage());
                            },
                            child: Container(
                              width: 72,
                              height: 72,
                              padding: const EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                  color: const Color(0xffD2FFFB),
                                  borderRadius: BorderRadius.circular(36)),
                              child: Image.asset(
                                ImageAsset.photo,
                              ),
                            ),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(top: 10),
                            child: Text(
                              "Photo",
                              style: TextStyle(
                                fontSize: 14,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          )
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            width: 72,
                            height: 72,
                            padding: const EdgeInsets.all(10),
                            decoration: BoxDecoration(
                                color: const Color(0xffE1E2FE),
                                borderRadius: BorderRadius.circular(36)),
                            child: Image.asset(
                              ImageAsset.dialog,
                            ),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(top: 10),
                            child: Text(
                              "Dialog",
                              style: TextStyle(
                                fontSize: 14,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          )
                        ],
                      ),
                      Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              Get.toNamed(TranslatorHistoryPage.routName);
                            },
                            child: Container(
                              width: 72,
                              height: 72,
                              padding: const EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                  color: const Color(0xffFEE5C5),
                                  borderRadius: BorderRadius.circular(36)),
                              child: Image.asset(
                                ImageAsset.history,
                              ),
                            ),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(top: 10),
                            child: Text(
                              "History",
                              style: TextStyle(
                                fontSize: 14,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                  Column(
                    children: [
                      GestureDetector(
                        onTap: () {
                          Get.toNamed(TranlatorPage.routName);
                        },
                        child: Container(
                          height: 80,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: const Color.fromARGB(213, 69, 168, 254),
                            borderRadius: BorderRadius.circular(16),
                            border: Border.all(
                              width: 1.5,
                              color: const Color(0xff0087FF),
                            ),
                          ),
                          child: Row(
                            children: [
                              const Expanded(
                                child: Padding(
                                  padding: EdgeInsets.only(left: 22),
                                  child: Text(
                                    "Type to Translate",
                                    style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.w400,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(right: 10),
                                child: Container(
                                  height: 36,
                                  width: 36,
                                  padding: const EdgeInsets.all(5),
                                  decoration: BoxDecoration(
                                    color: const Color(0xff8BCFFE),
                                    borderRadius: BorderRadius.circular(18),
                                  ),
                                  child: SvgPicture.asset(SvgAsset.homeVoice),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 50,
                      ),
                      const TranslatorFromTo()
                    ],
                  ),
                ],
              )),
            ],
          ),
        )),
      ),
    );
  }
}