import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.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_type/scene_type_controller.dart';
import 'package:trans_lark/util/obj_util.dart';
import 'package:trans_lark/widget/base_appbar.dart';
import 'package:trans_lark/widget/base_scrollbar.dart';
import 'package:trans_lark/widget/view_state_widget.dart';

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

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

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

  Widget _buildItem(SceneEntity item) {
    String assetsSvg = Assets.svgShopping;
    Color bgColor = const Color(0xff4E5AEC);
    if (item.sceneType == 'Shopping') {
      assetsSvg = Assets.svgShopping;
      bgColor = const Color(0xff4E5AEC);
    } else if (item.sceneType == 'Study') {
      assetsSvg = Assets.svgStudy;
      bgColor = const Color(0xff79CB9A);
    } else if (item.sceneType == 'Work') {
      assetsSvg = Assets.svgWork;
      bgColor = const Color(0xffFC6C6B);
    } else if (item.sceneType == 'Healthy') {
      assetsSvg = Assets.svgHealthy;
      bgColor = const Color(0xff53DED1);
    } else if (item.sceneType == 'Daily greetings') {
      assetsSvg = Assets.svgDailyGreetings;
      bgColor = const Color(0xffADAEFF);
    } else if (item.sceneType == 'Family') {
      assetsSvg = Assets.svgFamily;
      bgColor = const Color(0xffFFEE8B);
    } else if (item.sceneType == 'Making friends') {
      assetsSvg = Assets.svgMakeFriends;
      bgColor = const Color(0xffFFE7EF);
    } else if (item.sceneType == 'Transportation') {
      assetsSvg = Assets.svgTransportation;
      bgColor = const Color(0xff45A7FE);
    } else if (item.sceneType == 'Travel') {
      assetsSvg = Assets.svgTravel;
      bgColor = const Color(0xffFEE5C5);
    } else if (item.sceneType == 'Dining') {
      assetsSvg = Assets.svgDinning;
      bgColor = const Color(0xffFD9D65);
    }
    return InkWell(
      onTap: () => controller.onTapItem(item),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 20),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 66,
              height: 82,
              decoration: BoxDecoration(
                color: bgColor,
                borderRadius: BorderRadius.circular(7),
              ),
              child: Stack(
                children: [
                  Positioned(
                    bottom: 0,
                    right: 0,
                    child: FittedBox(
                      fit: BoxFit.none,
                      child: SvgPicture.asset(
                        assetsSvg,
                        width: 54,
                        height: 54,
                      ),
                    ),
                  ),
                  Positioned(
                    top: 4,
                    left: 7,
                    right: 7,
                    child: Text(
                      ObjUtil.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(
                    ObjUtil.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,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
