import 'package:cached_network_image/cached_network_image.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/new_user/new_user_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/resource/string.gen.dart';
import 'package:get/get.dart';

import '../../../../resource/assets.gen.dart';

class StepIntimacyStagesView extends BasePage<NewUserController> {
  const StepIntimacyStagesView({super.key});

  @override
  Color backgroundColor() {
    return Colors.transparent;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 30.w, right: 30.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  StringName.newUserIntimacyStagesTitle,
                  style: TextStyle(
                    color: Colors.black.withAlpha(204),
                    fontSize: 22.sp,
                    fontWeight: FontWeight.w500,
                    height: 0,
                  ),
                ),
                SizedBox(height: 7.h),
                Text(
                  StringName.newUserIntimacyStagesDesc,
                  style: TextStyle(
                    color: Colors.black.withAlpha(153),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 40.w),
          Obx(() {
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CachedNetworkImage(
                  imageUrl:
                  controller
                      .intimacyList?[controller.selectedIndex.value]
                      .iconUrl ??
                      "",
                  width: 192.w,
                  height: 300.w,
                  fit: BoxFit.contain,
                  placeholder:
                      (context, url) =>
                          SizedBox(),
                  errorWidget:
                      (_, __, ___) =>
                      Assets.images.iconNewUserStagesAmbiguous.image(
                        width: 192.w,
                        height: 300.w,
                        fit: BoxFit.contain,
                      ),
                ),

                _buildStagesList(),
              ],
            );
          }),
        ],
      ),
    );
  }

  Widget _buildStagesList() {
    return Container(
      margin: EdgeInsets.only(right: 18.w),
      child: Obx(() {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children:
          (controller.intimacyList == null ||
              controller.intimacyList!.isEmpty)
              ? [SizedBox.shrink()]
              : List.generate(controller.intimacyList!.length, (index) {
            final isSelected = controller.selectedIndex.value == index;
            return GestureDetector(
              onTap: () => controller.selectIndex(index),
              child: Container(
                height: 64.h,
                width: 120.w,
                alignment: Alignment.center,
                child: AnimatedScale(
                  scale: isSelected ? 1.0 : 0.82,
                  duration: const Duration(milliseconds: 250),
                  curve: Curves.easeOutCubic,
                  child: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: isSelected ? null : Colors.white,
                      gradient:
                      isSelected
                          ? LinearGradient(
                        begin: Alignment(0.04, 0.21),
                        end: Alignment(0.98, 0.76),
                        colors: [
                          const Color(0xFF7D46FC),
                          const Color(0xFFBC87FF),
                        ],
                      )
                          : null,
                      boxShadow:
                      isSelected
                          ? [
                        BoxShadow(
                          color: const Color(0xFFCEBEFF),
                          blurRadius: 5.80,
                          offset: Offset(0, 4),
                        ),
                      ]
                          : [],
                      borderRadius: BorderRadius.circular(17.r),
                    ),
                    child: Text(
                      controller.intimacyList?[index].name ?? "",
                      style: TextStyle(
                        color:
                        isSelected
                            ? Colors.white
                            : Colors.black.withAlpha(153),
                        fontSize: 17.14.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ),
              ),
            );
          }),
        );
      }),
    );
  }
}
