import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/data/bean/template_bean.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/resource/string.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../resource/assets.gen.dart';
import '../../../router/app_pages.dart';
import '../../../utils/common_style.dart';
import 'controller.dart';

class TemplateEditPage extends BasePage<TemplateEditController> {
  const TemplateEditPage({super.key});

  static Future<dynamic> addStart() async {
    return Get.toNamed(RoutePath.templateEdit);
  }

  static Future<dynamic> editDetail(TemplateBean bean) async {
    return Get.toNamed(RoutePath.templateEdit, arguments: bean);
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: 'F6F6F6'.color,
      appBar: _buildAppBar(),
      body: Column(
        children: [
          Expanded(child: _buildTemplateContent()),
          _buildTemplateBtn()
        ],
      ),
    );
  }

  Widget _buildTemplateContent() {
    return SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 12.w),
        child: SizedBox(
          width: double.infinity,
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            SizedBox(height: 12.h),
            Text(StringName.templateEditName.tr,
                style: TextStyle(
                    fontSize: 14.sp, color: ColorName.secondaryTextColor)),
            SizedBox(height: 8.h),
            _buildTemplateTitle(),
            SizedBox(height: 20.h),
            Text(StringName.templateEditTitle.tr,
                style: TextStyle(
                    fontSize: 14.sp, color: ColorName.secondaryTextColor)),
            Text(StringName.templateEditTitleHint.tr,
                style: TextStyle(
                    fontSize: 12.sp, color: ColorName.tertiaryTextColor)),
            SizedBox(height: 12.h),
            _buildTemplateTitleList(),
            _buildDefaultTemplate(),
            _buildAddTemplate()
          ]),
        ));
  }

  Widget _buildAddTemplate() {
    return GestureDetector(
      onTap: () {
        controller.onAddTemplate();
      },
      child: Container(
        margin: EdgeInsets.only(bottom: 8.w),
        decoration: BoxDecoration(
            color: '#F0F0F0'.color, borderRadius: BorderRadius.circular(8.w)),
        child: Row(
          children: [
            SizedBox(width: 15.w),
            Assets.images.iconTemplateAddTitle.image(width: 28.w, height: 28.w),
            SizedBox(width: 10.w),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 17.w),
              child: Text(StringName.templateEditTitleTxt.tr,
                  style: TextStyle(
                      fontSize: 15.sp, color: ColorName.tertiaryTextColor)),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildDefaultTemplate() {
    return Obx(() {
      if (controller.defaultTemplate?.isNotEmpty == true) {
        return _templateItem(controller.defaultTemplate!, hideDeleteIcon: true);
      } else {
        return Container();
      }
    });
  }

  Widget _buildTemplateTitleList() {
    return Obx(() {
      return ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            var item = controller.templateCustomTitle[index];
            return _templateItem(item, itemClick: () {
              controller.onUpdateTemplate(index, item);
            }, deleteClick: () {
              controller.onDeleteTemplate(index);
            });
          },
          itemCount: controller.templateCustomTitle.length,
          shrinkWrap: true);
    });
  }

  Widget _templateItem(String title,
      {bool? hideDeleteIcon,
      VoidCallback? itemClick,
      VoidCallback? deleteClick}) {
    return GestureDetector(
      onTap: itemClick,
      child: Container(
          margin: EdgeInsets.only(bottom: 8.w),
          decoration: BoxDecoration(
              color: ColorName.white, borderRadius: BorderRadius.circular(8.w)),
          padding: EdgeInsets.symmetric(horizontal: 14.w),
          child: Row(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(vertical: 17.w),
                child: Text(title,
                    style: TextStyle(
                        fontSize: 15.sp, color: ColorName.primaryTextColor)),
              ),
              SizedBox(width: 14.w),
              const Spacer(),
              GestureDetector(
                onTap: deleteClick,
                child: Visibility(
                    visible: hideDeleteIcon != true,
                    child: Assets.images.iconRenameClearTxt
                        .image(width: 20.w, height: 20.w)),
              )
            ],
          )),
    );
  }

  Widget _buildTemplateTitle() {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
          color: ColorName.white, borderRadius: BorderRadius.circular(8.w)),
      child: TextField(
          focusNode: controller.focusNode,
          controller: controller.titleController,
          maxLength: 6,
          decoration: InputDecoration(
            counterText: '',
            contentPadding:
                EdgeInsets.symmetric(horizontal: 14.w, vertical: 20.w),
            border: const OutlineInputBorder(borderSide: BorderSide.none),
            hintStyle: TextStyle(
                height: 1, fontSize: 20.sp, color: ColorName.tertiaryTextColor),
            hintText: StringName.templateEditNameHint.tr,
          ),
          style: TextStyle(
              height: 1, fontSize: 20.sp, color: ColorName.primaryTextColor)),
    );
  }

  Widget _buildTemplateBtn() {
    return GestureDetector(
      onTap: () {
        controller.onSaveTemplate();
      },
      child: Center(
        child: Container(
          margin: EdgeInsets.only(bottom: 16.w),
          decoration: getCommonDecoration(8.w),
          width: 328.w,
          height: 48.w,
          child: Center(
            child: Text(
              StringName.templateEditSave.tr,
              style: TextStyle(fontSize: 16.sp, color: ColorName.white),
            ),
          ),
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      scrolledUnderElevation: 0,
      systemOverlayStyle: SystemUiOverlayStyle.dark,
      backgroundColor: Colors.transparent,
      title: Text(
        StringName.templateAddTitle.tr,
        style: TextStyle(fontSize: 17.sp, color: ColorName.primaryTextColor),
      ),
      actions: [
        GestureDetector(
          onTap: () {
            controller.onCancel();
          },
          child: Text(
            StringName.cancel.tr,
            style:
                TextStyle(fontSize: 15.sp, color: ColorName.secondaryTextColor),
          ),
        ),
        SizedBox(width: 12.w)
      ],
      centerTitle: true,
      leading: IconButton(
          onPressed: () {
            controller.onBack();
          },
          icon: SizedBox(
              width: 24.w,
              height: 24.w,
              child: Assets.images.iconBack.image())),
    );
  }
}