import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_translate/common/components/base_appbar.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/pages/color_setting/color_setting_controller.dart';
import 'package:get/get.dart';

class ColorSettingView extends GetView<ColorSettingController> {
  const ColorSettingView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const BaseAppbar(title: 'Color Setting'),
      body: Obx(
        () => SafeArea(
          child: Column(
            children: [
              40.verticalSpace,
              _colors(),
              _translate(),
              _microphone(),
              Expanded(child: Container()),
              _button(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _colors() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 25).w,
      width: double.infinity,
      child: Wrap(
        alignment: WrapAlignment.spaceBetween,
        children: controller.colors
            .map(
              (color) => GestureDetector(
                onTap: () => controller.changeColor(color),
                child: Container(
                  width: 60.w,
                  height: 60.w,
                  margin: const EdgeInsets.all(5).w,
                  padding: const EdgeInsets.all(5).w,
                  decoration: BoxDecoration(
                    color: Color(color),
                    borderRadius: BorderRadius.circular(30.r),
                  ),
                  child: Image.asset(
                    Assets.iconSelected,
                    color: controller.currentColor.value == color
                        ? Colors.white
                        : Colors.transparent,
                  ),
                ),
              ),
            )
            .toList(),
      ),
    );
  }

  Widget _translate() {
    return Container(
      height: 91.w,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Color(controller.currentColor.value),
        borderRadius: BorderRadius.circular(22.r),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 20).w,
      margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 40).w,
      child: Row(
        children: [
          Expanded(
            child: Text(
              "Type to Translate",
              style: TextStyle(
                fontSize: 20.sp,
                fontWeight: FontWeight.w600,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _microphone() {
    return Container(
      height: 65.w,
      width: 65.w,
      padding: const EdgeInsets.all(15).w,
      decoration: BoxDecoration(
        color: Color(controller.currentColor.value).withOpacity(.7),
        borderRadius: BorderRadius.circular(65.r),
      ),
      child: Image.asset(
        Assets.iconHomeMicrophone,
        color: Colors.white,
      ),
    );
  }

  Widget _button() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20).w,
      child: Row(
        children: [
          Expanded(
            child: GestureDetector(
              onTap: Get.back,
              child: Container(
                alignment: Alignment.center,
                height: 45.w,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(65.r),
                  border:
                      Border.all(color: Color(controller.currentColor.value)),
                ),
                child: Text(
                  "cancel",
                  style: TextStyle(
                    color: Color(controller.currentColor.value),
                    fontSize: 18.sp,
                  ),
                ),
              ),
            ),
          ),
          10.horizontalSpace,
          Expanded(
            child: GestureDetector(
              onTap: controller.submit,
              child: Container(
                alignment: Alignment.center,
                height: 45.w,
                decoration: BoxDecoration(
                  color: Color(controller.currentColor.value),
                  borderRadius: BorderRadius.circular(65.r),
                ),
                child: Text(
                  "submit",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.sp,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
