import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/common/components/navigation_bar/base_appbar.dart';
import 'package:wallpaperx/page/ai_setting/ai_setting_controller.dart';
import 'package:wallpaperx/res/values/strings.dart';

class AiSettingView extends GetView<AiSettingController> {
  const AiSettingView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: BaseAppBar(
        appName,
        backgroundColor: Colors.black,
        titleStyle: TextStyle(color: Colors.white, fontSize: 24.sp),
      ),
      body: Container(
        padding: const EdgeInsets.all(15).w,
        child: Obx(
          () => Column(
            children: [
              const Text(
                "Label",
                style: TextStyle(color: Colors.white),
              ),
              _buildSettingLabel(),
              10.verticalSpace,
              _buildLabelOption(),
              10.verticalSpace,
              _buildApply(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSettingLabel() {
    return Container(
      height: 150.w,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10).r,
        border: Border.all(color: Colors.grey),
      ),
      child: ListView(
        padding: const EdgeInsets.all(8).w,
        children: [
          Wrap(
            spacing: 3.w,
            runSpacing: 3.w,
            children: controller.labelSettingList
                .map((e) => labelSettingItem(e))
                .toList(),
          )
        ],
      ),
    );
  }

  Widget labelSettingItem(label) {
    return GestureDetector(
      onTap: () => controller.removeLabel(label),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8).w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50).r,
          border: Border.all(color: Colors.grey),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              label,
              style: const TextStyle(color: Colors.white),
            ),
            const Icon(
              Icons.close,
              color: Colors.white,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLabelOption() {
    return Container(
      height: 400.w,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10).r,
        border: Border.all(color: Colors.grey),
      ),
      child: ListView(
        padding: const EdgeInsets.all(8).w,
        children: [
          Wrap(
            spacing: 3.w,
            runSpacing: 3.w,
            children: controller.labelOptionList
                .map((e) => labelOptionItem(e))
                .toList(),
          )
        ],
      ),
    );
  }

  Widget labelOptionItem(label) {
    return GestureDetector(
      onTap: () => controller.addLabel(label),
      child: Container(
        margin: EdgeInsets.only(right: 3.w),
        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8).w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50).r,
          border: Border.all(color: Colors.grey),
        ),
        child: Text(
          label,
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  Widget _buildApply() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        GestureDetector(
          onTap: controller.setLabelSetting,
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 5.w, horizontal: 15.w),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20).r, color: Colors.white),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Apply",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.black87,
                    fontSize: 16.sp,
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}