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/common/components/view_state.dart';
import 'package:flutter_translate/common/utils/object_utils.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/model/scene_model.dart';
import 'package:flutter_translate/pages/scene_category/scene_category_controller.dart';
import 'package:get/get.dart';

class SceneCategoryView extends GetView<SceneCategoryController> {
  const SceneCategoryView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const BaseAppbar(title: 'Selected Oral Expressions'),
      body: _body(),
    );
  }

  Widget _body() {
    return Obx(() {
      return ViewState(
        viewStateEnum: controller.viewState.value,
        child: ListView.builder(
          itemCount: controller.sceneTypeList.length,
          itemBuilder: (context, index) {
            var item = controller.sceneTypeList[index];
            return _sceneItem(item);
          },
        ),
      );
    });
  }

  Widget _sceneItem(SceneModel item) {
    String image = Assets.imagesDailyQuoteShopping;
    Color bgColor = const Color(0xff4E5AEC);
    if (item.sceneType == 'Shopping') {
      image = Assets.imagesDailyQuoteShopping;
      bgColor = const Color(0xff4E5AEC);
    } else if (item.sceneType == 'Study') {
      image = Assets.imagesDailyQuoteStudy;
      bgColor = const Color(0xff79CB9A);
    } else if (item.sceneType == 'Work') {
      image = Assets.imagesDailyQuoteWork;
      bgColor = const Color(0xffFC6C6B);
    } else if (item.sceneType == 'Healthy') {
      image = Assets.imagesDailyQuoteHealthy;
      bgColor = const Color(0xff53DED1);
    } else if (item.sceneType == 'Daily greetings') {
      image = Assets.imagesDailyQuoteGreetings;
      bgColor = const Color(0xffADAEFF);
    } else if (item.sceneType == 'Family') {
      image = Assets.imagesDailyQuoteFamily;
      bgColor = const Color(0xffFFEE8B);
    } else if (item.sceneType == 'Making friends') {
      image = Assets.imagesDailyQuoteMakeFriends;
      bgColor = const Color(0xffFFE7EF);
    } else if (item.sceneType == 'Transportation') {
      image = Assets.imagesDailyQuoteTransportation;
      bgColor = const Color(0xff45A7FE);
    } else if (item.sceneType == 'Travel') {
      image = Assets.imagesDailyQuoteTravel;
      bgColor = const Color(0xffFEE5C5);
    } else if (item.sceneType == 'Dining') {
      image = Assets.imagesDailyQuoteDinning;
      bgColor = const Color(0xffFD9D65);
    }
    return InkWell(
      onTap: () => controller.sceneList(item.sceneList ?? []),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 20).w,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 66.w,
              height: 82.w,
              clipBehavior: Clip.hardEdge,
              decoration: BoxDecoration(
                color: bgColor,
                borderRadius: BorderRadius.circular(7),
              ),
              child: Stack(
                children: [
                  Positioned(
                    bottom: 0,
                    right: 0,
                    child: FittedBox(
                      fit: BoxFit.none,
                      child: Image.asset(
                        image,
                        width: 38.w,
                        height: 38.w,
                      ),
                    ),
                  ),
                  Positioned(
                    top: 4.w,
                    left: 7.w,
                    right: 7.w,
                    child: Text(
                      ObjectUtils.getStr(item.sceneType).toUpperCase(),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            15.horizontalSpace,
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    ObjectUtils.getStr(item.sceneType),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: const Color(0xff152A3D),
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    '${item.sceneList != null ? item.sceneList!.length : 0} selected authentic spoken sentences',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: const Color(0xff696969),
                      fontSize: 11.sp,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
