import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trans_lark/entity/scene_entity.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/page/scene_category/scene_category_controller.dart';
import 'package:trans_lark/util/t_object_utils.dart';
import 'package:trans_lark/widget/t_base_appbar_widget.dart';
import 'package:trans_lark/widget/t_base_scrollbar_widget.dart';
import 'package:trans_lark/widget/t_view_state_widget.dart';

class SceneCategoryView extends StatelessWidget {
  SceneCategoryView({super.key});

  final controller = Get.find<SceneCategoryController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: const TBaseAppbarWidget(
        title: 'Selected oral expressions',
      ),
      body: SafeArea(
        top: false,
        child: Obx(() {
          return TViewStateWidget(
            viewState: controller.viewState.value,
            child: TBaseScrollbarWidget(
              child: ListView.builder(
                itemCount: controller.sceneTypeList.length,
                itemBuilder: (context, index) {
                  var item = controller.sceneTypeList[index];
                  return _buildItem(item);
                },
              ),
            ),
          );
        }),
      ),
    );
  }

  Widget _buildItem(SceneEntity 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.toSceneItem(item),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 20),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 66,
              height: 82,
              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,
                        height: 38,
                      ),
                    ),
                  ),
                  Positioned(
                    top: 4,
                    left: 7,
                    right: 7,
                    child: Text(
                      TObjectUtils.getStr(item.sceneType).toUpperCase(),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 14,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(width: 15),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    TObjectUtils.getStr(item.sceneType),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: Color(0xff152A3D),
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    '${item.sceneList != null ? item.sceneList!.length : 0} selected authentic spoken sentences',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: Color(0xff696969),
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
