import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/page/home/home_logic.dart';
import 'package:trans_lark/util/obj_util.dart';
import 'package:trans_lark/widget/language_bar.dart';

class HomePage extends StatelessWidget {
  final HomeLogic logic = Get.put(HomeLogic());

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        padding: const EdgeInsets.symmetric(horizontal: 20),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              Assets.imagesHomeBackground,
            ),
            fit: BoxFit.fill,
          ),
        ),
        child: SafeArea(
          child: Column(
            children: [
              _buildHead(),
              Expanded(
                child: Column(
                  children: [
                    _buildDailyQuote(),
                    Expanded(child: Container()),
                    _buildTools(),
                    Expanded(child: Container()),
                    _buildTranslate(),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHead() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text(
            "Courses",
            style: TextStyle(
              color: Color(0xff1E1E1E),
              fontSize: 24,
              fontWeight: FontWeight.w700,
            ),
          ),
          GestureDetector(
            onTap: logic.openSettings,
            child: ClipOval(
              child: Container(
                width: 32,
                height: 32,
                color: const Color(0xff4ECA8C),
                child: FittedBox(
                  fit: BoxFit.none,
                  child: SvgPicture.asset(
                    Assets.svgHomeMore,
                    width: 20,
                    height: 20,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDailyQuote() {
    return Stack(
      children: [
        GestureDetector(
          onTap: logic.openSceneType,
          child: Column(
            children: [
              const SizedBox(height: 30),
              Container(
                height: 222,
                decoration: BoxDecoration(
                    border:
                        Border.all(width: 1.5, color: const Color(0xff3AAA72)),
                    color: const Color.fromARGB(213, 78, 202, 140),
                    borderRadius: BorderRadius.circular(16)),
              ),
            ],
          ),
        ),
        Positioned(
          top: 46,
          left: 20,
          child: GestureDetector(
            onTap: logic.openSceneType,
            child: Row(
              children: [
                const Text(
                  "Daily Quote",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w800,
                    fontStyle: FontStyle.italic,
                    color: Colors.white,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 5),
                  child: SvgPicture.asset(Assets.svgHomeRightIcon),
                )
              ],
            ),
          ),
        ),
        Positioned(
          top: -4,
          right: 24,
          child: Image.asset(
            Assets.imagesRabbitSayGood,
            width: 90,
            height: 90,
          ),
        ),
        Column(
          children: [
            const SizedBox(
              height: 85,
            ),
            Container(
              width: double.infinity,
              height: 168,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                border: Border.all(width: 1.5, color: const Color(0xff3AAA72)),
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Column(
                children: [
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Obx(() {
                          return Text(
                            logic.fromLanguage.value != null
                                ? logic.fromLanguage.value!.languageName
                                : '',
                            style: const TextStyle(
                              fontSize: 12,
                              color: Color(0xffC2C3C5),
                            ),
                          );
                        }),
                        const SizedBox(height: 9),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: Obx(() {
                                return Text(
                                  ObjUtil.getStr(logic.fromStr.value),
                                  overflow: TextOverflow.ellipsis,
                                  style: const TextStyle(
                                    fontSize: 16,
                                    color: Color(0xff152A3D),
                                    fontWeight: FontWeight.w500,
                                  ),
                                );
                              }),
                            ),
                            GestureDetector(
                              onTap: () => logic.translatorTtsPlay(true),
                              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: FittedBox(
                                  fit: BoxFit.none,
                                  child: SvgPicture.asset(
                                    Assets.svgSpeaker,
                                    width: 16,
                                    height: 16,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  const Divider(
                    height: 1,
                    thickness: 1,
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Obx(() {
                          return Text(
                            logic.toLanguage.value != null
                                ? logic.toLanguage.value!.languageName
                                : '',
                            style: const TextStyle(
                              fontSize: 12,
                              color: Color(0xffC2C3C5),
                            ),
                          );
                        }),
                        const SizedBox(height: 9),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: Obx(() {
                                return Text(
                                  ObjUtil.getStr(logic.toStr.value),
                                  overflow: TextOverflow.ellipsis,
                                  style: const TextStyle(
                                    fontSize: 16,
                                    color: Color(0xff152A3D),
                                    fontWeight: FontWeight.w500,
                                  ),
                                );
                              }),
                            ),
                            GestureDetector(
                              onTap: () => logic.translatorTtsPlay(false),
                              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: FittedBox(
                                  fit: BoxFit.none,
                                  child: SvgPicture.asset(
                                    Assets.svgSpeaker,
                                    width: 16,
                                    height: 16,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildTools() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Column(
          children: [
            GestureDetector(
              onTap: logic.onTapPhotos,
              child: Container(
                width: 72,
                height: 72,
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: const Color(0xffD2FFFB),
                  borderRadius: BorderRadius.circular(36),
                ),
                child: Image.asset(
                  Assets.imagesPhoto,
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                "Photo",
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.black,
                  fontWeight: FontWeight.w500,
                ),
              ),
            )
          ],
        ),
        Column(
          children: [
            GestureDetector(
              onTap: logic.openFaceToFace,
              child: Container(
                width: 72,
                height: 72,
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: const Color(0xffE1E2FE),
                  borderRadius: BorderRadius.circular(36),
                ),
                child: Image.asset(
                  Assets.imagesDialog,
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                "Face2face",
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.black,
                  fontWeight: FontWeight.w500,
                ),
              ),
            )
          ],
        ),
        Column(
          children: [
            GestureDetector(
              onTap: logic.openTranslateHistory,
              child: Container(
                width: 72,
                height: 72,
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: const Color(0xffFEE5C5),
                  borderRadius: BorderRadius.circular(36),
                ),
                child: Image.asset(
                  Assets.imagesHistory,
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                "History",
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.black,
                  fontWeight: FontWeight.w500,
                ),
              ),
            )
          ],
        ),
      ],
    );
  }

  Widget _buildTranslate() {
    return Column(
      children: [
        GestureDetector(
          onTap: logic.openTranslate,
          child: Container(
            height: 76,
            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: 20),
                    child: Text(
                      "Type to Translate",
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w400,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    right: 20,
                  ),
                  child: GestureDetector(
                    onTap: logic.onTapSpeak,
                    child: Container(
                      height: 36,
                      width: 36,
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                        color: const Color(0xff8BCFFE),
                        borderRadius:
                        BorderRadius.circular(18),
                      ),
                      child: SvgPicture.asset(
                        Assets.svgHomeVoice,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 20),
        const LanguageBar(),
        const SizedBox(height: 20),
      ],
    );
  }
}
