import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/common/components/navigation_bar/custom_appbar.dart';
import 'package:wallpaperx/generated/assets.dart';
import 'package:wallpaperx/res/values/strings.dart';

import 'ai_manager_controller.dart';

class AiManagerView extends GetView<AiManagerController> {
  const AiManagerView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesSettingBackground),
            fit: BoxFit.cover,
          ),
        ),
        child: Obx(
          () => Column(
            children: [
              CustomAppbar(
                appName,
                backgroundColor: Colors.transparent,
                titleStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
              15.verticalSpace,
              Expanded(
                child: Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 15,
                  ).w,
                  child: Column(
                    children: [
                      _buildLocalAiSettingLabel(),
                      SizedBox(height: 15.w),
                      _buildAllAiLabelOption(),
                    ],
                  ),
                ),
              ),
              _buildApply(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildLocalAiSettingLabel() {
    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.deleteAiLabel(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 _buildAllAiLabelOption() {
    return Expanded(
      child: Container(
        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.aiLabelOptions
                  .map((e) => labelOptionItem(e))
                  .toList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget labelOptionItem(label) {
    return GestureDetector(
      onTap: () => controller.putAiLabel(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: const TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  Widget _buildApply() {
    return GestureDetector(
      onTap: controller.resetAiConfig,
      child: Container(
        margin: EdgeInsets.symmetric(
          vertical: 15.w,
          horizontal: 15.w,
        ),
        padding: EdgeInsets.symmetric(
          vertical: 10.w,
          horizontal: 15.w,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50).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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}