import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/components/keep_alive_wrapper.dart';
import 'package:tone_snap/components/my_custom_indicator.dart';
import 'package:tone_snap/components/view_state_widget.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sideb/widgets/remove_padding_music_bar.dart';
import 'package:tone_snap/res/themes/app_colors.dart';
import 'package:tone_snap/utils/obj_util.dart';

import 'search_result_controller.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            _buildSearch(context),
            Obx(() {
              if (controller.searchResultViewState.value != null) {
                return _buildSearchResult();
              } else {
                return _buildSearchSuggestions();
              }
            }),
            const RemovePaddingMusicBar(),
          ],
        ),
      ),
    );
  }

  Widget _buildSearch(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 18.w),
      child: Row(
        children: [
          Expanded(
            child: Container(
              height: 40.h,
              padding: EdgeInsets.symmetric(horizontal: 10.w),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(20).r,
              ),
              child: Row(
                children: [
                  Image.asset(
                    Assets.sideBSearchWhite,
                    width: 24.w,
                    height: 24.w,
                  ),
                  Expanded(
                    child: TextField(
                      maxLines: 1,
                      focusNode: controller.myFocusNode,
                      controller: controller.textEditingController,
                      textInputAction: TextInputAction.done,
                      keyboardType: TextInputType.text,
                      style: TextStyle(color: const Color(0xD9FFFFFF), fontSize: 14.sp),
                      textAlignVertical: TextAlignVertical.center,
                      textAlign: TextAlign.left,
                      maxLength: 60,
                      decoration: InputDecoration(
                        counterText: '',
                        hintText: 'Search songs,playlists',
                        hintStyle: TextStyle(
                          color: const Color(0xFF666666),
                          fontSize: 14.sp,
                        ),
                        contentPadding: const EdgeInsets.symmetric(horizontal: 14).w,
                        isCollapsed: true,
                        border: InputBorder.none,
                      ),
                      onChanged: (value) => controller.onChanged(value),
                      onSubmitted: (value) => controller.onTapSearch(value, isSearchSuggestionsItem: false),
                    ),
                  ),
                  Obx(() {
                    return Visibility(
                      visible: ObjUtil.isNotEmpty(controller.searchKeyword.value),
                      child: GestureDetector(
                        onTap: controller.cleanTextEditingController,
                        child: Image.asset(
                          Assets.sideBDeleteWhite,
                          width: 24.w,
                          height: 24.w,
                        ),
                      ),
                    );
                  }),
                ],
              ),
            ),
          ),
          SizedBox(width: 18.w),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: controller.onTapCancel,
            child: Container(
              height: 40.h,
              alignment: Alignment.center,
              child: Text(
                'Cancel',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: const Color(0xD9FFFFFF),
                  fontSize: 14.sp,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSearchSuggestions() {
    return Expanded(
      child: Obx(() {
        return ViewStateWidget(
          viewState: controller.searchSuggestionsViewState.value,
          child: Obx(() {
            return ListView.builder(
              itemCount: controller.searchSuggestionsList.length,
              itemBuilder: (context, index) {
                return Material(
                  color: Colors.transparent,
                  child: InkWell(
                    onTap: () => controller.onTapSearch(controller.searchSuggestionsList[index]),
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 14.h),
                      child: Text(
                        controller.searchSuggestionsList[index],
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14.sp,
                        ),
                      ),
                    ),
                  ),
                );
              },
            );
          }),
        );
      }),
    );
  }

  Widget _buildSearchResult() {
    return Expanded(
      child: Obx(() {
        return ViewStateWidget(
          viewState: controller.searchResultViewState.value!,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 46.h,
                child: Obx(() {
                  return TabBar(
                    controller: controller.tabController.value,
                    isScrollable: true,
                    tabAlignment: TabAlignment.start,
                    dividerHeight: 0,
                    padding: const EdgeInsets.symmetric(horizontal: 6).w,
                    labelPadding: const EdgeInsets.symmetric(horizontal: 12).w,
                    labelStyle: TextStyle(
                      color: seedColor,
                      fontSize: 16.sp,
                    ),
                    unselectedLabelStyle: TextStyle(
                      color: const Color(0xFF666666),
                      fontSize: 16.sp,
                    ),
                    indicatorPadding: const EdgeInsets.only(bottom: 4).h,
                    indicator: MyCustomIndicator(
                      indWidth: 16.w,
                      indHeight: 3.h,
                      color: seedColor,
                      radius: 20.r,
                    ),
                    tabs: controller.tabs.map((e) => Tab(text: e.title)).toList(),
                  );
                }),
              ),
              Expanded(
                child: Obx(() {
                  return TabBarView(
                    controller: controller.tabController.value,
                    children: controller.pages.map((e) => KeepAliveWrapper(child: e)).toList(),
                  );
                }),
              ),
            ],
          ),
        );
      }),
    );
  }
}
