import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/global_config.dart';
import 'package:trans_lark/page/index/index_controller.dart';
import 'package:trans_lark/util/t_object_utils.dart';
import 'package:trans_lark/widget/t_language_bar_widget.dart';

class IndexView extends StatelessWidget {
  final IndexController logic = Get.put(IndexController());

  IndexView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesHomeBackground),
            fit: BoxFit.fill,
          ),
        ),
        child: SafeArea(
          child: Column(
            children: [
              _buildHead(),
              const SizedBox(height: 42),
              _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: [
          GestureDetector(
            onTap: logic.openSettingsBottomSheet,
            child: Container(
              width: 36,
              height: 36,
              padding: const EdgeInsets.all(6.5),
              decoration: BoxDecoration(
                color: GlobalConfig.appColor,
                borderRadius: BorderRadius.circular(36),
              ),
              child: Image.asset(
                Assets.imagesHomeMore,
              ),
            ),
          ),
          const Text(
            GlobalConfig.appName,
            style: TextStyle(
              color: Color(0xff1E1E1E),
              fontSize: 24,
              fontWeight: FontWeight.w700,
            ),
          ),
          const SizedBox(width: 36),
        ],
      ),
    );
  }

  Widget _buildDailyQuote() {
    return GestureDetector(
      onTap: logic.toSceneCategory,
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.only(top: 28, left: 22, bottom: 31),
            decoration: const BoxDecoration(
              color: Color(0xffBFE9D4),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
            ),
            child: Stack(
              clipBehavior: Clip.none,
              alignment: AlignmentDirectional.bottomStart,
              children: [
                Positioned(
                  bottom: 2.8,
                  child: Container(
                    width: 73,
                    height: 7,
                    decoration: BoxDecoration(
                      color: const Color(0xff5CC2AD),
                      borderRadius: BorderRadius.circular(16),
                    ),
                  ),
                ),
                Row(
                  children: [
                    const Text(
                      "Daily Quote",
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w800,
                        fontStyle: FontStyle.italic,
                        color: Color(0xff240F69),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(left: 5),
                      child: Image.asset(
                        Assets.imagesArrowRight,
                        color: const Color(0xff240F69),
                        width: 14,
                        height: 14,
                      ),
                    ),
                  ],
                ),
                Positioned(
                  right: -20,
                  bottom: -31,
                  child: Image.asset(
                    Assets.imagesSuspendedDecoration,
                    width: 211.41,
                    height: 99.14,
                  ),
                ),
              ],
            ),
          ),
          Column(
            children: [
              Container(
                width: double.infinity,
                height: 168,
                padding: const EdgeInsets.symmetric(horizontal: 20),
                alignment: Alignment.center,
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(16),
                    bottomRight: Radius.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(
                                    TObjectUtils.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: GlobalConfig.appColor,
                                      borderRadius: BorderRadius.circular(12)),
                                  child: FittedBox(
                                    fit: BoxFit.none,
                                    child: Image.asset(
                                      Assets.imagesSpeakerIcon,
                                      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(
                                    TObjectUtils.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: GlobalConfig.appColor,
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  child: FittedBox(
                                    fit: BoxFit.none,
                                    child: Image.asset(
                                      Assets.imagesSpeakerIcon,
                                      width: 16,
                                      height: 16,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildTools() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: Row(
        children: [
          Column(
            children: [
              GestureDetector(
                onTap: logic.toPhotos,
                child: Container(
                  width: 72,
                  height: 72,
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(72),
                  ),
                  child: Image.asset(
                    Assets.imagesToolsPhoto,
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.only(top: 10),
                child: Text(
                  "Photo",
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.black,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              )
            ],
          ),
          Expanded(child: Container()),
          Column(
            children: [
              GestureDetector(
                onTap: logic.toP2P,
                child: Container(
                  width: 72,
                  height: 72,
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(72),
                  ),
                  child: Image.asset(
                    Assets.imagesToolsDialog,
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.only(top: 10),
                child: Text(
                  "Face2face",
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.black,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              )
            ],
          ),
          Expanded(child: Container()),
          Column(
            children: [
              GestureDetector(
                onTap: logic.toTranslateHistory,
                child: Container(
                  width: 72,
                  height: 72,
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(72),
                  ),
                  child: Image.asset(
                    Assets.imagesToolsHistory,
                  ),
                ),
              ),
              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.toTranslate,
          child: Container(
            height: 91,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: GlobalConfig.appColor,
              borderRadius: BorderRadius.circular(22),
            ),
            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(7),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(18),
                      ),
                      child: Image.asset(
                        Assets.imagesHomeMicrophone,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 20),
        const TLanguageBarWidget(),
        const SizedBox(height: 20),
      ],
    );
  }
}